如何解决使用JavaScript将对象的JSON数组转换为nasted JSON树
我有一个API,该API返回对象的JSON数组。需要根据每个节点中的“父ID”将其转换为父/子关系中的嵌套JSON数组。如果“ parientid”为null,它将是根节点,其他将是该父节点的子节点。以下是我从API获得的示例JSON数组。
var API_DATA = [
{
"DIAGID": 1,"DIAGNOSIS": "Certain infectious or parasitic diseases ","DIAGTYPE": "Chapter","PARENTID": null,},{
"DIAGID": 2,"DIAGNOSIS": "Gastroenteritis or colitis of infectious origin ","DIAGTYPE": "Section","PARENTID": 1,{
"DIAGID": 3,"DIAGNOSIS": "Bacterial intestinal infections","DIAGTYPE": "Category","PARENTID": 2,{
"DIAGID": 4,"DIAGNOSIS": "Cholera","DIAGTYPE": "Group","PARENTID": 3,{
"DIAGID": 5,"DIAGNOSIS": "Intestinal infection due to other Vibrio","DIAGTYPE": "Disease","PARENTID": 4,{
"DIAGID": 6,"DIAGNOSIS": "Intestinal infections due to Shigella",{
"DIAGID": 7,"DIAGNOSIS": "Intestinal infections due to Escherichia coli",{
"DIAGID": 8,"DIAGNOSIS": "Neoplasms",{
"DIAGID": 9,"DIAGNOSIS": "Neoplasms of brain or central nervous system","PARENTID": 8,{
"DIAGID": 10,"DIAGNOSIS": "Primary neoplasms of brain ","PARENTID": 9,{
"DIAGID": 11,"DIAGNOSIS": "Gliomas of brain","PARENTID": 10,{
"DIAGID": 12,"DIAGNOSIS": "Glioblastoma of brain","PARENTID": 11,{
"DIAGID": 13,"DIAGNOSIS": "Other specified gliomas of brain",}
]
我想基于每个对象中的“ ParentId”以父/子关系将其转换为树格式。以下是我要在其中进行转换的JSON示例。我想将“ DIAGID”作为值,将“ DIAGNOSIS”作为名称。
const data = {
label: 'search me',value: 'searchme',children: [
{
label: 'search me too',value: 'searchmetoo',children: [
{
label: 'No one can get me',value: 'anonymous',],}
我是javascript的新手,我曾经使用过javascript数组,map函数,但对于我应该采用哪种方法几乎不需要任何指导。
解决方法
您可以对树进行单循环处理。
var data = [{ DIAGID: 1,DIAGNOSIS: "Certain infectious or parasitic diseases ",DIAGTYPE: "Chapter",PARENTID: null },{ DIAGID: 2,DIAGNOSIS: "Gastroenteritis or colitis of infectious origin ",DIAGTYPE: "Section",PARENTID: 1 },{ DIAGID: 3,DIAGNOSIS: "Bacterial intestinal infections",DIAGTYPE: "Category",PARENTID: 2 },{ DIAGID: 4,DIAGNOSIS: "Cholera",DIAGTYPE: "Group",PARENTID: 3 },{ DIAGID: 5,DIAGNOSIS: "Intestinal infection due to other Vibrio",DIAGTYPE: "Disease",PARENTID: 4 },{ DIAGID: 6,DIAGNOSIS: "Intestinal infections due to Shigella",{ DIAGID: 7,DIAGNOSIS: "Intestinal infections due to Escherichia coli",{ DIAGID: 8,DIAGNOSIS: "Neoplasms",{ DIAGID: 9,DIAGNOSIS: "Neoplasms of brain or central nervous system",PARENTID: 8 },{ DIAGID: 10,DIAGNOSIS: "Primary neoplasms of brain ",PARENTID: 9 },{ DIAGID: 11,DIAGNOSIS: "Gliomas of brain",PARENTID: 10 },{ DIAGID: 12,DIAGNOSIS: "Glioblastoma of brain",PARENTID: 11 },{ DIAGID: 13,DIAGNOSIS: "Other specified gliomas of brain",PARENTID: 11 }],tree = function (data,root) {
var t = {};
data.forEach(({ DIAGID,DIAGNOSIS,PARENTID }) => {
Object.assign(t[DIAGID] = t[DIAGID] || {},{ label: DIAGID,name: DIAGNOSIS });
t[PARENTID] = t[PARENTID] || {};
t[PARENTID].children = t[PARENTID].children || [];
t[PARENTID].children.push(t[DIAGID]);
});
return t[root].children;
}(data,null);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
,
当您要将Array
转换为另一种形状(在本例中为长度不同的Array
,其中包含树木)时,建议使用Array.prototype.reduce。
在下面的代码示例中,我首先使用reduce
将现有数组变成具有children
的树形,然后在结果数组上使用map
一个递归函数,它遍历树并赋予每个对象最终的形状。
还要注意,Array.prototype.concat方法用于返回新的Array
,并在末尾添加了值。
function findParent(arr,diagId) {
return arr.find((parent) => parent.DIAGID === diagId);
}
function createTreeNode(value) {
return {
label: value.DIAGNOSIS,value: value.DIAGID,children: (value.children !== undefined)
? value.children.map(createTreeNode)
: undefined
};
}
function createTree(data) {
return data
// first restructure existing nodes as a tree
.reduce((result,value,index,originalArray) => {
if (value.PARENTID !== null) {
const parent = findParent(originalArray,value.PARENTID);
if (parent) {
// add as child if has parent
parent.children = (parent.children || []).concat(value);
}
return result;
} else {
// Add value to top level of the result array
return result.concat(value);
}
},[] /* Initialize with empty result array */)
// them map to new data type
.map(createTreeNode);
}
var API_DATA = [
{
"DIAGID": 1,"DIAGNOSIS": "Certain infectious or parasitic diseases ","DIAGTYPE": "Chapter","PARENTID": null,},{
"DIAGID": 2,"DIAGNOSIS": "Gastroenteritis or colitis of infectious origin ","DIAGTYPE": "Section","PARENTID": 1,{
"DIAGID": 3,"DIAGNOSIS": "Bacterial intestinal infections","DIAGTYPE": "Category","PARENTID": 2,{
"DIAGID": 4,"DIAGNOSIS": "Cholera","DIAGTYPE": "Group","PARENTID": 3,{
"DIAGID": 5,"DIAGNOSIS": "Intestinal infection due to other Vibrio","DIAGTYPE": "Disease","PARENTID": 4,{
"DIAGID": 6,"DIAGNOSIS": "Intestinal infections due to Shigella",{
"DIAGID": 7,"DIAGNOSIS": "Intestinal infections due to Escherichia coli",{
"DIAGID": 8,"DIAGNOSIS": "Neoplasms",{
"DIAGID": 9,"DIAGNOSIS": "Neoplasms of brain or central nervous system","PARENTID": 8,{
"DIAGID": 10,"DIAGNOSIS": "Primary neoplasms of brain ","PARENTID": 9,{
"DIAGID": 11,"DIAGNOSIS": "Gliomas of brain","PARENTID": 10,{
"DIAGID": 12,"DIAGNOSIS": "Glioblastoma of brain","PARENTID": 11,{
"DIAGID": 13,"DIAGNOSIS": "Other specified gliomas of brain",}
];
const tree = createTree(API_DATA);
console.log(tree);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。