鍍金池/ 問答/Linux  HTML/ js如何將N個(gè)類似的JSON合并成一個(gè)

js如何將N個(gè)類似的JSON合并成一個(gè)

由于自己對于數(shù)據(jù)處理這塊缺乏經(jīng)驗(yàn),所以遇到類似的問題就會懵逼,希望大神能夠幫忙解答一下我的問題,謝謝。
具體描述如下:
1.目前有N多個(gè)json數(shù)據(jù),是從接口中返回的,且不知道這個(gè)N是多少
2.返回的JSON數(shù)據(jù),有一個(gè)共同點(diǎn),就是title相同;而不同的title則需要合并成另外一個(gè)新的數(shù)據(jù),具體如下

clipboard.png
圖中這5個(gè)JSON,其中4個(gè)的title是一致的,只有最后一個(gè)是單獨(dú)的,想要獲得最終的數(shù)據(jù)結(jié)構(gòu)如下

[
    {
        title: '蠻荒記(樹下野狐)',
        details: [
            {
                page: {
                    from: 28,
                    to: 29
                },
                time: '2018-3-12 15:45',
                type: '標(biāo)注'
            },
             {
                page: {
                    from: 28,
                    to: 29
                },
                time: '2018-3-12 15:45',
                type: '標(biāo)注'
            },
             {
                page: {
                    from: 28,
                    to: 29
                },
                time: '2018-3-12 15:45',
                type: '標(biāo)注'
            },
        ],
        snippet: [
            '半山紅葉如火,層林盡染,被狂風(fēng)呼卷,仿佛漫漫火海,搖曳跳躍。山坡上衰草起伏不絕,一直連綿到平原上,宛如接天洶涌海浪。',
            '精銳之師。其座下飛獸也是精挑細(xì)選的極為兇猛的靈獸,又經(jīng)特殊培訓(xùn),嗜血好殺,見著漫天兇獸,非但毫不畏縮,反倒激起狂暴兇性。',
            ...
        ]
    },
    {
        title: '炎武戰(zhàn)神 (xiao少爺)',
        details: [
            {
                page: {
                    from: 2770,
                    to: 2771
                },
                time: '2018-5-10 10:25',
                type: '筆記'
            }
        ],
        snippet: [
            '這是一條測試的筆記內(nèi)容'
        ]
    }
]

數(shù)據(jù)處理小白感謝大神的回復(fù),希望大神不要吐槽我,謝謝

回答
編輯回答
風(fēng)清揚(yáng)

以 TITLE 為 KEY,建立一個(gè) MAP,如果 MAP 中找到指定的 KEY,把對應(yīng)的數(shù)據(jù)取出來,合并 details 數(shù)組,沒找到就把當(dāng)前記錄加進(jìn)去。完成之后把 MAP 轉(zhuǎn)成數(shù)組,如果要保留原順序,在建 MAP 的同時(shí)建一個(gè)數(shù)組來保持順序,注意 MAP 和數(shù)組的同步。

先思想下上面的思路,我晚點(diǎn)再來補(bǔ)代碼


還要先恢復(fù)你的原始數(shù)據(jù)……下次問問題記得把原始數(shù)據(jù)貼出來

[
    {
        "title": "蠻荒記(樹下野狐)",
        "details": {
            "page": {
                "from": 28,
                "to": 29
            },
            "time": "2018-3-12 15:45",
            "type": "標(biāo)注"
        },
        "snippet": "半山紅葉如火,層林盡染,被狂風(fēng)呼卷,仿佛漫漫火海,搖曳跳躍。山坡上衰草起伏不絕,一直連綿到平原上,宛如接天洶涌海浪。"
    },
    {
        "title": "蠻荒記(樹下野狐)",
        "details": {
            "page": {
                "from": 28,
                "to": 29
            },
            "time": "2018-3-12 15:45",
            "type": "標(biāo)注"
        },
        "snippet": "精銳之師。其座下飛獸也是精挑細(xì)選的極為兇猛的靈獸,又經(jīng)特殊培訓(xùn),嗜血好殺,見著漫天兇獸,非但毫不畏縮,反倒激起狂暴兇性。"
    },
    {
        "title": "蠻荒記(樹下野狐)",
        "details": {
            "page": {
                "from": 28,
                "to": 29
            },
            "time": "2018-3-12 15:45",
            "type": "標(biāo)注"
        },
        "snippet": "測試筆記內(nèi)容"
    },
    {
        "title": "炎武戰(zhàn)神 (xiao少爺)",
        "details": {
            "page": {
                "from": 2770,
                "to": 2771
            },
            "time": "2018-5-10 10:25",
            "type": "筆記"
        },
        "snippet": "這是一條測試的筆記內(nèi)容"
    }
]

然后才是處理代碼

// source 引用的是原始數(shù)據(jù)
// target 是生成的新數(shù)據(jù)

const target = (() => {
    const dict = {};
    source.forEach(m => {
        let model = dict[m.title];
        if (model) {
            model.details.push(m.details);
            model.snippet.push(m.snippet);
        } else {
            dict[m.title] = {
                title: m.title,
                details: [m.details],
                snippet: [m.snippet]
            }
        }
    });
    return Object.values(dict);
})();
2017年12月28日 18:34
編輯回答
六扇門

第一:先提一個(gè)疑問,一個(gè)接口返回一個(gè)json嗎,你這多少個(gè)接口呀,不合理吧。
第二:一個(gè)接口返回n個(gè)json,一個(gè)一個(gè)返回,直接在返回這里處理

//在外面定義一個(gè)數(shù)組
var arrList = [];
//單個(gè)返回處理
for(var i of arrList.keys()){
    if(arrList[i].title == json.title){
        (arrList[i].detail).push(json.detail)
    }else{
        var j = arrList.length;
        arrList[j].title = json.title
        arrList[j].detail = [];
        (arrList[j].detail).push(json.detail)
    }
}
2018年2月25日 07:51
編輯回答
檸檬藍(lán)
var resulte = []

/* 取到數(shù)據(jù) data,合成*/
var hasitem = resulte.some(item=>{
    if(item.title == data.title){
        item.details.push(data.details)
    }
    return item.title == data.title
})
hasitem || resulte.push({
    title: data.title,
    details: [data.details]
})
2017年3月4日 15:57