基于相同嵌套键合并嵌套 JavaScript 对象

Question

我一直在尝试转动以下输入：

{

    "list": [

        {

            "name": "light_with_header",

            "path": "webapp/master_layouts/sidebar_layouts/",

            "type": "Directory",

            "data": {

                "angular": {

                    "html": ""

                }

            }

        },

        {

            "name": "light_with_header",

            "path": "webapp/master_layouts/sidebar_layouts/",

            "type": "Directory",

            "data": {

                "angular": {

                    "script": ""

                }

            }

        },

        {

            "name": "light_with_header",

            "path": "webapp/master_layouts/sidebar_layouts/",

            "type": "Directory",

            "data": {

                "html": {

                    "html": ""

                }

            }

        },

        {

            "name": "light_with_header",

            "path": "webapp/master_layouts/sidebar_layouts/",

            "type": "Directory",

            "data": {

                "html": {

                    "script": ""

                }

            }

        },

        {

            "name": "light_with_header",

            "path": "webapp/master_layouts/sidebar_layouts/",

            "type": "Directory",

            "data": {

                "react": {

                    "script": ""

                }

            }

        },

        {

            "name": "light_with_header",

            "path": "webapp/master_layouts/sidebar_layouts/",

            "type": "Directory",

            "data": {

                "vue": {

                    "script": ""

                }

            }

        },

    {

        "name": "light_with_header",

        "path": "webapp/master_layouts/sidebar_layouts/",

        "type": "Directory",

        "data": {

            "vue": {

                "script": ""

            }

        }

    },

Answer 1

这是一个更新版本，旨在完全满足上述要求：inp={"list": [  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"html": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"html": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"react": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"vue": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"vue": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"html": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"html": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"react": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"vue": {"script": ""}}}]};const res  =Object.values(inp.list.reduce((a,c)=>{         //  Object.values: only return the different *values* of the collection  let nam=c.name+c.path+c.type;    // collect "similar" objects together   let curr=a[nam]=a[nam]||{...c};  // create or refer to a collection element  Object.entries(c.data).forEach(([k,v])=>curr.data[k]={...curr.data[k],...v})  return a},{}));console.log(res)以前的版本...这是您问题的另一种解决方案（单行）。它与您的要求不同，因为它构建在输入对象的第一个元素上，因此不包含名称“light_with_header_and_icons”而不是“light_with_header”，const inp={"list": [  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"html": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"html": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"react": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"vue": {"script": ""}}},  {"name": "light_with_header","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"vue": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"html": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"angular": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"html": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"html": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"react": {"script": ""}}},  {"name": "light_with_header_and_icons","path": "webapp/master_layouts/sidebar_layouts/","type": "Directory","data": {"vue": {"script": ""}}}]}const res=inp.list.reduce((a,c)=>(Object.entries(c.data).forEach(([k,v])=>a.data[k]={...a.data[k],...v}),a))console.log(res)// alternative version:const res2=inp.list.reduce((a,c)=>(Object.entries(c.data).forEach(([k,v])=>a.data[k]={...a.data[k],...v}),a),inp.list[inp.list.length-1])console.log(res2)我的“替代”版本返回一个基于 的最后一个元素构建的输出对象inp.list。

Answer 2

首先维护一个将 id 映射到对象的对象，然后您可以稍后将其转换回列表：const mappings = {};const ordering = []; // maintain ordering and path/type fields// assuming your object is in variable objfor (const {data, ...rest} of obj.list) {    if (rest.name in mappings) {        Object.assign(mappings[rest.name], data);    } else {        mappings[rest.name] = data;        ordering.push(rest);    }}const newObj = {list: ordering.map(x => ({...x, data: mappings[x.name]}))};const obj = {    "list": [        {            "name": "light_with_header",            "path": "webapp/master_layouts/sidebar_layouts/",            "type": "Directory",            "data": {                "angular": {                    "html": ""                }            }        },        {            "name": "light_with_header",            "path": "webapp/master_layouts/sidebar_layouts/",            "type": "Directory",            "data": {                "angular": {                    "script": ""                }            }        },        {            "name": "light_with_header",            "path": "webapp/master_layouts/sidebar_layouts/",            "type": "Directory",            "data": {                "html": {                    "html": ""                }            }        },        {            "name": "light_with_header",            "path": "webapp/master_layouts/sidebar_layouts/",            "type": "Directory",            "data": {                "html": {                    "script": ""                }            }        },        {            "name": "light_with_header",            "path": "webapp/master_layouts/sidebar_layouts/",            "type": "Directory",            "data": {                "react": {                    "script": ""                }            }        },        {            "name": "light_with_header",            "path": "webapp/master_layouts/sidebar_layouts/",            "type": "Directory",            "data": {                "vue": {                    "script": ""                }            }        },    {        "name": "light_with_header",        "path": "webapp/master_layouts/sidebar_layouts/",        "type": "Directory",        "data": {            "vue": {                "script": ""            }        }    },    {        "name": "light_with_header_and_icons",        "path": "webapp/master_layouts/sidebar_layouts/",        "type": "Directory",        "data": {            "angular": {                "html": ""            }        }    },    {        "name": "light_with_header_and_icons",        "path": "webapp/master_layouts/sidebar_layouts/",        "type": "Directory",        "data": {            "angular": {                "script": ""            }        }    },    {        "name": "light_with_header_and_icons",        "path": "webapp/master_layouts/sidebar_layouts/",        "type": "Directory",        "data": {            "html": {                "html": ""            }        }    },    {        "name": "light_with_header_and_icons",        "path": "webapp/master_layouts/sidebar_layouts/",        "type": "Directory",        "data": {            "html": {                "script": ""            }        }    },    {        "name": "light_with_header_and_icons",        "path": "webapp/master_layouts/sidebar_layouts/",        "type": "Directory",        "data": {            "react": {                "script": ""            }        }    },    {        "name": "light_with_header_and_icons",        "path": "webapp/master_layouts/sidebar_layouts/",        "type": "Directory",        "data": {            "vue": {                "script": ""            }        }    },    ]};const mappings = {};const ordering = []; // maintain ordering and path/type fields// assuming your object is in variable objfor (const {data, ...rest} of obj.list) {    if (rest.name in mappings) {        Object.assign(mappings[rest.name], data);    } else {        mappings[rest.name] = data;        ordering.push(rest);    }}const newObj = {list: ordering.map(x => ({...x, data: mappings[x.name]}))};console.log(newObj);.as-console-wrapper {min-height: 100%};

Answer 3

这是检查现有条目的简单reduce()方法。find()const input = { "list": [{ "name": "light_with_header", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "angular": { "html": "" } } }, { "name": "light_with_header", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "angular": { "script": "" } } }, { "name": "light_with_header", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "html": { "html": "" } } }, { "name": "light_with_header", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "html": { "script": "" } } }, { "name": "light_with_header", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "react": { "script": "" } } }, { "name": "light_with_header", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "vue": { "script": "" } } }, { "name": "light_with_header", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "vue": { "script": "" } } }, { "name": "light_with_header_and_icons", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "angular": { "html": "" } } }, { "name": "light_with_header_and_icons", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "angular": { "script": "" } } }, { "name": "light_with_header_and_icons", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "html": { "html": "" } } }, { "name": "light_with_header_and_icons", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "html": { "script": "" } } }, { "name": "light_with_header_and_icons", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "react": { "script": "" } } }, { "name": "light_with_header_and_icons", "path": "webapp/master_layouts/sidebar_layouts/", "type": "Directory", "data": { "vue": { "script": "" } } },] }const output = {};output.list = input.list.reduce((a, o) => {  const p = a.find(({ name }) => name === o.name);  if (p) {    Object.entries(o.data).forEach(([k, v]) =>      p.data[k] = { ...p.data[k] ?? {}, ...v }    );  } else {    a.push({ ...o })  }  return a;}, []);console.log(output)

Answer 4

我已经找到了我需要的解决方案。真的谢谢大家的帮助。我把车改装了10米。我创建一个新列表并将所有内容附加到其中。我的未来代码..let myList = []list.reduce((a,c)=>{    if(a.name !== c.name){        myList.push(c)        return c    }else{        return (Object.entries(c.data).forEach(([k,v])=>a.data[k]={...a.data[k],...v}),a)    }},list[list.length-1])