Giả sử, chúng ta có một mảng các đối tượng như thế này -
const arr = [ {"id":7,"name":"Kuwait","parentId":2}, {"id":4,"name":"Iraq","parentId":2}, {"id":10,"name":"Qatar","parentId":2}, {"id":2,"name":"Middle East","parentId":1}, {"id":3,"name":"Bahrain","parentId":2}, {"id":6,"name":"Jordan","parentId":2}, {"id":8,"name":"Lebanon","parentId":2}, {"id":1,"name":"Africa/Middle East","parentId":null}, {"id":5,"name":"Israel","parentId":2}, {"id":9,"name":"Oman","parentId":2} ];
Chúng tôi được yêu cầu viết một hàm JavaScript có trong một mảng như vậy. Sau đó, hàm sẽ chuẩn bị một mảng mới chứa các đối tượng được nhóm theo cha mẹ của chúng.
Do đó, đầu ra sẽ giống như thế này -
const output = [ {"id":55,"text":"Africa/Middle East","children":[ {"id":2,"text":"Middle East","children": [{"id":7,"name":"Kuwait","children":[]}, {"id":4,"name":"Iraq","children":[]}, {"id":10,"name":"Qatar","children":[]}, {"id":3,"name":"Bahrain","children":[]}, {"id":6,"name":"Jordan","children":[]}, {"id":8,"name":"Lebanon","children":[]}, {"id":5,"name":"Israel","children":[]}, {"id":9,"name":"Oman","children":[]}]} ];
Ví dụ
const arr = [ {"id":7,"name":"Kuwait","parentId":2}, {"id":4,"name":"Iraq","parentId":2}, {"id":10,"name":"Qatar","parentId":2}, {"id":2,"name":"Middle East","parentId":1}, {"id":3,"name":"Bahrain","parentId":2}, {"id":6,"name":"Jordan","parentId":2}, {"id":8,"name":"Lebanon","parentId":2}, {"id":1,"name":"Africa/Middle East","parentId":null}, {"id":5,"name":"Israel","parentId":2}, {"id":9,"name":"Oman","parentId":2} ]; const transformTree = (data, root = null) => { const res = []; const map = {}; data.forEach((el) => { el.children = map[el.id] && map[el.id].children || []; map[el.id] = el; if (el.parentId === root) { res.push(el); } else { map[el.parentId] = map[el.parentId] || {}; map[el.parentId].children = map[el.parentId].children || []; map[el.parentId].children.push(el); }; }); return res; }; console.log(JSON.stringify(transformTree(arr), undefined, 4));
Đầu ra
Và đầu ra trong bảng điều khiển sẽ là -
[ { "id": 1, "name": "Africa/Middle East", "parentId": null, "children": [ { "id": 2, "name": "Middle East", "parentId": 1, "children": [ { "id": 7, "name": "Kuwait", "parentId": 2, "children": [] }, { "id": 4, "name": "Iraq", "parentId": 2, "children": [] }, { "id": 10, "name": "Qatar", "parentId": 2, "children": [] }, { "id": 3, "name": "Bahrain", "parentId": 2, "children": [] }, { "id": 6, "name": "Jordan", "parentId": 2, "children": [] }, { "id": 8, "name": "Lebanon", "parentId": 2, "children": [] }, { "id": 5, "name": "Israel", "parentId": 2, "children": [] }, { "id": 9, "name": "Oman", "parentId": 2, "children": [] } ] } ] } ]