亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我怎樣才能以這種方式格式化這些數據?

我怎樣才能以這種方式格式化這些數據?

繁星淼淼 2023-07-20 17:06:01
它是嵌套的評論數據,我只想將數據做成這種格式。請幫助我獲得更好的優化函數,該函數可以將數組轉換為結構化數組,如下所示。 raw dataconst 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 datalet 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    }]我只是想在我的網絡應用程序中實現嵌套評論功能,所以我認為如果我以這種格式構建數據會更容易。還請讓我知道什么是最好的選擇。
查看完整描述

1 回答

?
MMMHUHU

TA貢獻1834條經驗 獲得超8個贊

Array#filter我們可以首先使用 過濾掉沒有父級的項目,因為這些是我們需要保留在最終數組中的項目。


然后使用它們將它們映射到其子項并在每個項目中Array#find添加一個屬性:children


const 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));


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號