js 數據轉換問題

題目

將下面的數據結構

[
    {
        "id": "1",
        "pid": "",
        "title": "標題1"
    },
    {
        "id": "2",
        "pid": "1",
        "title": "標題2"
    },
    {
        "id": "3",
        "pid": "1",
        "title": "標題3"
    },
    {
        "id": "4",
        "pid":"2",
        "title": "標題4"
    }
]

轉換爲

[
    {
        "id": "1",
        "pid": "",
        "title": "標題1",
        "childNode": [
            {
                "id": "2",
                "pid": "1",
                "title": "標題2",
                "childNode": [
                    {
                        "id": "4",
                        "pid": "2",
                        "title": "標題4",
                        "childNode": []
                    }
                ]
            },
            {
                "id": "3",
                "pid": "1",
                "title": "標題3",
                "childNode": []
            }
        ]
    }
]

實現

遞歸

const data = `
[
    {
        "id": "1",
        "pid": "",
        "title": "標題1"
    },
    {
        "id": "2",
        "pid": "1",
        "title": "標題2"
    },
    {
        "id": "3",
        "pid": "1",
        "title": "標題3"
    },
    {
        "id": "4",
        "pid":"2",
        "title": "標題4"
    }
]
`;

// 遞歸
let jsonArr2 = JSON.parse(data)
console.log('jsonArr1 ------->', jsonArr2)

function add(rootId = "") {
    const childNode = jsonArr2.filter(item => item.pid == rootId)
    for (let index = 0; index < childNode.length; index++) {
        const element = childNode[index];
        // 查找該節點下是否還有其他節點
        element.childNode = add(element.id)
    }
    return childNode
}
var obj1 = add()
console.log('jsonArr2-------->', JSON.stringify(obj1))

返回

[{"id":"1","pid":"","title":"標題1","childNode":[{"id":"2","pid":"1","title":"標題2","childNode":[{"id":"4","pid":"2","title":"標題4","childNode":[]}]},{"id":"3","pid":"1","title":"標題3","childNode":[]}]}]

格式化一下

[{
	"id": "1",
	"pid": "",
	"title": "標題1",
	"childNode": [{
		"id": "2",
		"pid": "1",
		"title": "標題2",
		"childNode": [{
			"id": "4",
			"pid": "2",
			"title": "標題4",
			"childNode": []
		}]
	}, {
		"id": "3",
		"pid": "1",
		"title": "標題3",
		"childNode": []
	}]
}]

Map 實現

const data2 = `
[
    {
        "id": "1",
        "pid": "",
        "title": "標題1"
    },
    {
        "id": "2",
        "pid": "1",
        "title": "標題2"
    },
    {
        "id": "3",
        "pid": "1",
        "title": "標題3"
    },
    {
        "id": "4",
        "pid":"2",
        "title": "標題4"
    }
]
`;

let jsonArr2 = JSON.parse(data2)
console.log('jsonArr1 ------->', jsonArr2)
function arrayToTree(data) {
  	// 最終返回的數據
    const rootNodes = [];
  	// 元素映射map
    const itemMap = {};

    // 首先，將每個元素添加到項映射中
    data.forEach(item => {
        itemMap[item.id] = { ...item, children: [] };
    });

    // 然後，將子節點添加到其父節點的“children”數組中
    data.forEach(item => {
      	//判斷是否有 父節點
        if (item.pid) {
          	// 如果存在，直接訪問push 到 itemMap 的 children裏
            itemMap[item.pid].children.push(itemMap[item.id]);
        } else {
          	// 不存在 則 說明 他的上一級就是根節點
          	// 則將 itemMap 當前節點的id push到最終要返回的map裏
            rootNodes.push(itemMap[item.id]);
        }
    });

    return rootNodes;
}
var obj2 = arrayToTree(jsonArr2)
console.log('jsonArr2 ------->',JSON.stringify(obj2))

返回

[{"id":"1","pid":"","title":"標題1","children":[{"id":"2","pid":"1","title":"標題2","children":[{"id":"4","pid":"2","title":"標題4","children":[]}]},{"id":"3","pid":"1","title":"標題3","children":[]}]}]

格式化一下

[{
	"id": "1",
	"pid": "",
	"title": "標題1",
	"children": [{
		"id": "2",
		"pid": "1",
		"title": "標題2",
		"children": [{
			"id": "4",
			"pid": "2",
			"title": "標題4",
			"children": []
		}]
	}, {
		"id": "3",
		"pid": "1",
		"title": "標題3",
		"children": []
	}]
}]