如何從基於特定子節點的傳入 JSON 創建新的數據結構

Question

我有一個傳入的 Json 列表，如下所示

[{
    "id": 190,
    "title": "This is a Story title",
    "category": [{
        "id": 43,
        "title": "XXX",
        "titleFr": "YYY"
    }, {
        "id": 27,
        "title": "AAA",
        "titleFr": "BBB"
    }]
}, {
    "id": 191,
    "title": "This is a Story title 2",
    "category": [{
        "id": 43,
        "title": "XXX",
        "titleFr": "YYY"
    }]
}]

我希望能夠找到所有唯一的類別 ID，然后通過按類別分組來創建一個新的數據結構（數組）...即

類別 27- AAA

這是一個故事標題

類別 43 - XXX

這是一個故事標題

這是一個故事標題 2

我有以下代碼，到目前為止我可以使用它來遍歷並獲取類別

$.each(data, function (i, ob) {
    $.each(ob, function (ind, obj) {
        if (ind === "category") {
            Categories.push(this);
        }
    });
});
console.log(Categories);

我覺得上面的方法效率很低，而且它不考慮類別是否已經存在。

其次，我想我需要再次返回整個列表，查找 Category.Id，找到后創建一個新的 obj，然后添加到新列表中？

我覺得這里有很多循環，使用 $.each 會非常低效。

任何幫助，將不勝感激。

Answer 1

您可以使用 vanilla JavaScript 實現這一點，在輸入數據上使用Array.reduce構建類別列表，迭代每個故事的每個類別並將故事標題推送到類別條目中的數組中。 然后，您可以使用Object.values將結果對象轉換為數組：

 const data = [{ "id": 190, "title": "This is a Story title", "category": [{ "id": 43, "title": "XXX", "titleFr": "YYY" }, { "id": 27, "title": "AAA", "titleFr": "BBB" }] }, { "id": 191, "title": "This is a Story title 2", "category": [{ "id": 43, "title": "XXX", "titleFr": "YYY" }] }]; const categories = Object.values(data.reduce((cats, v) => { v.category.forEach(c => { cats[c.id] = cats[c.id] || { id : c.id, title : c.title, titleFr : c.titleFr, stories : [] }; cats[c.id].stories.push(v.title); }); return cats; }, {})); console.log(categories);