首頁猿問如何在reactjs中顯示地圖內對...

如何在reactjs中顯示地圖內對象數組中的數據而不重復

JavaScript

SMILET 2023-07-14 09:39:18

在reactjs中需要一些幫助我下面有這些數據，我想顯示它而不重復，這意味著它應該是“A”、“B”和“D”的單個類別，我想在下面的地圖中執行此操作。 const person = { con: [ { category: "A", name: "john" }, { category: "A", name: "john" }, { category: "B", name: "rahul" }, { category: "B", name: "jay" }, { category: "C", name: "dave" }, { category: "D", name: "alex" }, { category: "D", name: "alex" }, { category: "E", name: "sam1" }, { category: "F", name: "sam2" }, { category: "G", name: "sam3" }, ] };person.con && person.con.map((data, index) => ( console.log(data, 'data') // I want to display results here... ))預期輸出：{ category: "A", name: "john" },{ category: "B", name: "rahul" },{ category: "C", name: "dave" },{ category: "D", name: "alex" },{ category: "E", name: "sam1" },{ category: "F", name: "sam2" },{ category: "G", name: "sam3" },這可能嗎？謝謝。

查看完整描述

2 回答

慕蓋茨4494581

TA貢獻1850條經驗獲得超11個贊

這是示例代碼

const person = {

con: [

{ category: "A", name: "john" },

{ category: "B", name: "rahul" },

{ category: "B", name: "jay" },

{ category: "C", name: "dave" },

{ category: "D", name: "alex" },

{ category: "E", name: "sam1" },

{ category: "F", name: "sam2" },

{ category: "G", name: "sam3" },

]

};

const duplicateCheck = [];

person.con && person.con.map((data, index) => {

if (duplicateCheck.includes(data.category))

return null;

duplicateCheck.push(data.category);

return data;

}).filter((e)=>(e))

// Above code returns filtered out array

輸出：

[ { category: 'A', name: 'john' },

{ category: 'B', name: 'rahul' },

{ category: 'C', name: 'dave' },

{ category: 'D', name: 'alex' },

{ category: 'E', name: 'sam1' },

{ category: 'F', name: 'sam2' },

{ category: 'G', name: 'sam3' } ]

反對回復 2023-07-14

狐的傳說

TA貢獻1804條經驗獲得超3個贊

我認為它應該看起來像這樣：稍微重組您的數據以使其更容易渲染然后渲染它。

const person = {

con: [

{ category: "A", name: "john" },

{ category: "A", name: "doe" },

{ category: "B", name: "rahul" },

{ category: "B", name: "jay" },

{ category: "C", name: "dave" },

{ category: "D", name: "alex" },

{ category: "D", name: "devid" },

{ category: "E", name: "sam" },

{ category: "F", name: "sam" },

{ category: "G", name: "sam" }

]

};

const groupedByCategory = person.con.reduce((acc, item) => {

if (!Array.isArray(acc[item.category])) {

acc[item.category] = [];

}

acc[item.category].push(item.name);

return acc;

}, {});

const Comp = () => {

return Object.entries(groupedByCategory).map(([category, names]) => {

return (

<div>

<h3>{category}</h3>

<ul>

{names.map((name) => (

))}

</ul>

</div>

);

});

};

反對回復 2023-07-14

2 回答
0 關注
133 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

如何在reactjs中顯示地圖內對象數組中的數據而不重復

如何在reactjs中顯示地圖內對象數組中的數據而不重復

2 回答

添加回答