Updated json not updating the jstree - ruby

Question

I am trying to use jstree in my ruby on rails application. I have the following data captured in rails
TransferRequestController.rb
def sources
#disease_code_id = params[:disease_code_id]
#phase_name = params[:phase_id]
#phase_id = RecruitmentPhase.select('recruitment_phases.phase_id').where('recruitment_phases.phase_name = ?', #phase_name)
#byebug
#sources = QuestionnaireItem.joins('join traits on traits.trait_id = questionnaire_items.trait_id join trait_groups on trait_groups.trait_id = traits.trait_id join sources on sources.source_id = traits.source_id join disease_phaseid_questionnaires on disease_phaseid_questionnaires.questionnaire_id = questionnaire_items.questionnaire_id join recruitment_phases on disease_phaseid_questionnaires.phase_id = recruitment_phases.phase_id').where('disease_phaseid_questionnaires.disease_code_id = ? and disease_phaseid_questionnaires.phase_id = ?', #disease_code_id, #phase_id.first.phase_id).where.not(:recruitment_phases => {phase_name:nil}).select('distinct sources.source_name', 'sources.source_id', 'recruitment_phases.phase_name', 'recruitment_phases.phase_id')
#sources.each { |x| $data.push(Node.new(x.source_name.strip, #phase_name.chomp, x.source_name.strip))}
respond_to do |format|
format.html
format.js
format.json { render json: $data.flatten}
end
end
In my application.js
function nextCall(phase_id, disease_code_id){
$.ajax({
url: "source/"+phase_id+"/"+disease_code_id,
dataType:'json',
type:'GET',
data: "{}",
success: function (data) {
$('#using_json_2').jstree(true).settings.core.data = data;
$('#using_json_2').jstree('refresh');
}
});
}
While debugging it, I am perfectly getting the node structure for the data as shown below
[
0,
{
"id": "Follow-up 4",
"parent": "#",
"text": "Follow-up 4"
},
{
"id": "Follow-up 3",
"parent": "#",
"text": "Follow-up 3"
},
{
"id": "Follow-up 2",
"parent": "#",
"text": "Follow-up 2"
},
{
"id": "Baseline",
"parent": "#",
"text": "Baseline"
},
{
"id": "Follow-up 3 extra",
"parent": "#",
"text": "Follow-up 3 extra"
},
{
"id": "Follow-up 1",
"parent": "#",
"text": "Follow-up 1"
},
{
"id": "question form popgen",
"parent": "Baseline",
"text": "question form popgen"
},
{
"id": "administrative/derived popgen",
"parent": "Baseline",
"text": "administrative/derived popgen"
},
{
"id": "practitioner record",
"parent": "Baseline",
"text": "practitioner record"
}
]
But my tree structure looks like the following
jstree
Can anyone help me where I am going wrong?

Answer 1

It's because of that first 0 you had in your json. Remove it and it will work as expected.
$('#tree').jstree({ 'core' : {
'data' : [
{
"id": "Follow-up 4",
"parent": "#",
"text": "Follow-up 4"
},
{
"id": "Follow-up 3",
"parent": "#",
"text": "Follow-up 3"
},
{
"id": "Follow-up 2",
"parent": "#",
"text": "Follow-up 2"
},
{
"id": "Baseline",
"parent": "#",
"text": "Baseline"
},
{
"id": "Follow-up 3 extra",
"parent": "#",
"text": "Follow-up 3 extra"
},
{
"id": "Follow-up 1",
"parent": "#",
"text": "Follow-up 1"
},
{
"id": "question form popgen",
"parent": "Baseline",
"text": "question form popgen"
},
{
"id": "administrative/derived popgen",
"parent": "Baseline",
"text": "administrative/derived popgen"
},
{
"id": "practitioner record",
"parent": "Baseline",
"text": "practitioner record"
}
]
} });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" rel="stylesheet" type="text/css" />
<div id='tree'>