两个关系Json数组合并并转换为treeview JStree答案

【问题标题】：Two relational Json array merge and convert to treeview JStree两个关系Json数组合并并转换为treeview JStree
【发布时间】：2021-04-29 00:28:25
【问题描述】：

我尝试了两个单独的 ajax 查询 JSON 对象列表并获取 json 列表，如下所示：

listperson = [ 
{ 
  Id: 25,
  name: "person1"
 },
{
  Id: 26,
  name: "person2"
}
];

listPersonDetails= 
[
 { 
  personId:25,
  lecture: "math",
  score:80
 },
{ 
  personId:25,
  lecture: "chm",
  score:95
 },
{ 
  personId:26,
  lecture: "math",
  score:60
 }
]

然后我尝试显示树视图；但我无法转换它。如何在 jstree 中像这样合并并转换为树视图：

----person1
    -person1 info 1
    -person1 info 2
----person2
    -person2 info 1
    -person2 info 2

【问题讨论】：

标签： javascript json treeview jstree

【解决方案1】：

试试这样：

var listperson = [{
    Id: 25,
    name: 'person1'
  },
  {
    Id: 26,
    name: 'person2'
  }
];

var listPersonDetails = [{
    personId: 25,
    lecture: 'math',
    score: 80
  },
  {
    personId: 25,
    lecture: 'chm',
    score: 95
  },
  {
    personId: 26,
    lecture: 'math',
    score: 60
  }
]

var jstreedata = [];

//convert to the necessary JSON format
$.each(listperson, function(indexperson, person) {
  jstreedata.push({
    'text': person.name,
    'state': {
      'opened': true,
      'selected': false
    },
    'children': []
  });

  $.each(listPersonDetails, function(indexdetails, details) {
    if (person.Id == details.personId) {
      jstreedata[indexperson]['children'].push({
        'text': details.lecture,
        'li_attr': {
          'title': 'Score = ' + details.score
        }
      })
    };
  });
});

//create jsTree
$(function() {
  $('#jstree_demo_div').jstree({
    'core': {
      'data': jstreedata
    }
  });
});

<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<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.2.1/jstree.min.js"></script>

<div id="jstree_demo_div"></div>

循环遍历两个数组并将组合结果添加到jsTree JSON format 中的新数组中。输出如下所示：

[
  {
    "text": "person1",
    "state": {
      "opened": true,
      "selected": false
    },
    "children": [
      {
        "text": "math",
        "li_attr": {
          "title": "Score = 80"
        }
      },
      {
        "text": "chm",
        "li_attr": {
          "title": "Score = 95"
        }
      }
    ]
  },
  {
    "text": "person2",
    "state": {
      "opened": true,
      "selected": false
    },
    "children": [
      {
        "text": "math",
        "li_attr": {
          "title": "Score = 60"
        }
      }
    ]
  }
]

【讨论】：