猿问

我怎样才能以这种方式格式化这些数据?

它是嵌套的评论数据,我只想将数据做成这种格式。

请帮助我获得更好的优化函数,该函数可以将数组转换为结构化数组,如下所示。 raw data


const data = [

    {

        id: 1,

        text : "Hello world",

        parent : null

    },

    {

        id: 2,

        text : "Hello world",

        parent : null

    },

    {

        id: 3,

        text : "Hello world",

        parent : 2

    },

    {

        id: 4,

        text : "Hello world",

        parent : 1

    },

    {

        id: 5,

        text : "Hello world",

        parent : 1

    },

    {

        id: 6,

        text : "Hello world",

        parent : null

    },

    {

        id: 7,

        text : "Hello world",

        parent : null

    }

]

formatted data


let structredData = [

    {

        id: 1,

        text : "Hello world",

        parent : null,

        children : [

             {

                id: 4,

                text : "Hello world",

                parent : 1

            },

            {

                id: 5,

                text : "Hello world",

                parent : 1

            }

        ]

    },

    {

        id: 2,

        text : "Hello world",

        parent : null,

        children : [

            {

                id: 3,

                text : "Hello world",

                parent : 2

            } 

        ]

    },

    {

        id: 6,

        text : "Hello world",

        parent : null

    },

    {

        id: 7,

        text : "Hello world",

        parent : null

    }

]

我只是想在我的网络应用程序中实现嵌套评论功能,所以我认为如果我以这种格式构建数据会更容易。还请让我知道什么是最好的选择。


繁星淼淼
浏览 125回答 1
1回答

MMMHUHU

Array#filter我们可以首先使用 过滤掉没有父级的项目,因为这些是我们需要保留在最终数组中的项目。然后使用它们将它们映射到其子项并在每个项目中Array#find添加一个属性:childrenconst mapToChild = (data) => {     return data     .filter(i => !i.parent)     .map(d => {       let children;       if(!d.parent){        children = data.filter(i => i.parent === d.id);       }       return children && children.length ? {...d, children} : d;     }); }const data = [    {        id: 1,        text : "Hello world",        parent : null    },    {        id: 2,        text : "Hello world",        parent : null    },    {        id: 3,        text : "Hello world",        parent : 2    },    {        id: 4,        text : "Hello world",        parent : 1    },    {        id: 5,        text : "Hello world",        parent : 1    },    {        id: 6,        text : "Hello world",        parent : null    },    {        id: 7,        text : "Hello world",        parent : null    }];console.log(mapToChild(data));编辑以处理嵌套子项:Array#reduce当我们必须照顾嵌套的孩子时,我们可以使用:const mapToChild = (data) => {  return data.reduce((r, o) => {    const children = data.filter(i => i.parent == o.id);    if(children && children.length) {      o.children = children;    }    !o.parent && r.push(o);    return r;  }, []);}const data = [    {        id: 2,        text : "Hello world",        parent : null    },    {        id: 3,        text : "Hello world",        parent : 2    },    {        id: 4,        text : "Hello world",        parent : 3    }];console.log(mapToChild(data));
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答