首頁猿問如何通過javascript將父子...

如何通過javascript將父子數組轉換為json樹結構

JavaScript

慕俠2389804 2023-06-09 17:40:22

我有一個對象數組，想通過 java 腳本函數將其轉換為 JSON 樹結構，然后在 vue js 項目中使用它。該頁面有一個需要 JSON 樹結構的 vuetify 樹組件。我的數據已存儲在具有父子結構的 MySql 表中。采樣日期：[ {"id": 123, "parentid": 0, "name": "Mammals"}, {"id": 456, "parentid": 123, "name": "Dogs"}, {"id": 214, "parentid": 456, "name": "Labradors"}, {"id": 810, "parentid": 456, "name": "Pugs"}, {"id": 919, "parentid": 456, "name": "Terriers"}]結果：[ { "id": 123, "parentid": 0, "name": "Mammals", "children": [ { "id": 456, "parentid": 123, "name": "Dogs", "children": [ { "id": 214, "parentid": 456, "name": "Labradors" }, { "id": 810, "parentid": 456, "name": "Pugs" }, { "id": 919, "parentid": 456, "name": "Terriers" } ] } ] }]來自這個地址的示例數據：https ://gist.github.com/smrchy/7040377

查看完整描述

2 回答

qq_笑_17

TA貢獻1818條經驗獲得超7個贊

您可以reduce使用一個對象對數組執行操作來存儲對每個對象的引用（用于添加子對象）和一個數組來存儲結果。

const arr = [

{"id": 123, "parentid": 0, "name": "Mammals"},

{"id": 456, "parentid": 123, "name": "Dogs"},

{"id": 214, "parentid": 456, "name": "Labradors"},

{"id": 810, "parentid": 456, "name": "Pugs"},

{"id": 919, "parentid": 456, "name": "Terriers"}

];

const {res} = arr.reduce((acc,curr)=>{

if(acc.parentMap[curr.parentid]){

(acc.parentMap[curr.parentid].children =

acc.parentMap[curr.parentid].children || []).push(curr);

} else {

acc.res.push(curr);

}

acc.parentMap[curr.id] = curr;

return acc;

}, {parentMap: {}, res: []});

console.log(res);

反對回復 2023-06-09

www說

TA貢獻1775條經驗獲得超8個贊

我發現更容易理解：

創建數組中所有可能 id 的對象/字典，以及
然后在將孩子附加到父母后通過字典：

const array = [

? ? ? { id: 919, parentid: 456, name: "Terriers" },

? ? ? { id: 456, parentid: 123, name: "Dogs" },

? ? ? { id: 214, parentid: 456, name: "Labradors" },

? ? ? { id: 810, parentid: 456, name: "Pugs" },

? ? ? { id: 123, parentid: 0, name: "Mammals" },

? ? ];

? ??

? ? let tree = [], arrayDictionary = {};

? ??

? ? // First map the nodes of the array to an object/dictionary where the key is their id

? ? array.forEach((cat) => {

? ? ? arrayDictionary[cat.id] = cat;

? ? ? arrayDictionary[cat.id]["children"] = [];

? ? });

? ??

? ? // for each entry in the dictionary

? ? for (var entry in arrayDictionary) {

? ? ? // get all the data for this entry in the dictionary

? ? ? const mappedElem = arrayDictionary[entry];

? ? ? // if the element has a parent, add it

? ? ? if (

? ? ? ? mappedElem.parentid && // the dictionary has a parent

? ? ? ? arrayDictionary[mappedElem["parentid"]] // and that parent exists

? ? ? ? ) {

? ? ? ? arrayDictionary[mappedElem["parentid"]]["children"].push(mappedElem);

? ? ? }

? ? ? // else is at the root level (parentid = null or 0)

? ? ? else {

? ? ? ? tree.push(mappedElem);

? ? ? }

? ? }

? ??

? ? console.log(tree);

反對回復 2023-06-09

2 回答
0 關注
174 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何通過javascript將父子數組轉換為json樹結構

如何通過javascript將父子數組轉換為json樹結構

2 回答

添加回答