基于相同嵌套键合并嵌套 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 obj

for (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 obj

for (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])