通過使用 reduce() 方法，我設法使用原始檔案到達某個點，但我堅持最后一步。給我陣列的物件由“this.props.portfolio_treemap”呼叫。
這是原始陣列：
[
{
"id": 1,
"ticker": "VGHF11",
"total_today_brl": 10322.4,
"category": "Category 1",
},
{
"id": 2,
"ticker": "BTAL11",
"total_today_brl": 10942.25,
"category": "Category 1",
},
{
"id": 32,
"ticker": "BTC",
"total_today_brl": 2203.11,
"category": "Category 2",
},
]
我將此代碼與 reduce 一起使用以按類別分組：
class TreeMap extends React.Component {
constructor(props) {
super(props);
this.state = {
},
series: [
{
name: '',
data: []
}
]
}
}
render() {
return (
<>
{console.log(
this.props.portfolio_treemap.reduce(
(TreeMap, { category, ticker, total_today_brl }) => {
(TreeMap[category] = TreeMap[category] || []).push({ x: ticker, y: total_today_brl });
return TreeMap;
}, {})
)}
這個的輸出陣列是那個：
{
"Category 1": [
{
"x": "VGHF11",
"y": 10322.4
},
{
"x": "BTAL11",
"y": 10942.25
}
],
"Category 2": [
{
"x": "BTC",
"y": 2203.11
}
]
}
但實際上我想得到這個：
[
{
"name": "Category 1",
"data": [
{
"x": "VGHF11",
"y": 10322.4
},
{
"x": "BTAL11",
"y": 10942.25
}
]
},
{
"name": "Category 2",
"data":
[
{
"x": "BTC",
"y": 2203.11
}
]
}
]
我不知道我怎么能做到這一點，謝謝
uj5u.com熱心網友回復：
作為一個 2 階段的程序，首先分組為 的一個物件{[category]:data}，然后從中創建您的陣列：
const data = [
{
"id": 1,
"ticker": "VGHF11",
"total_today_brl": 10322.4,
"category": "Category 1",
},
{
"id": 2,
"ticker": "BTAL11",
"total_today_brl": 10942.25,
"category": "Category 1",
},
{
"id": 32,
"ticker": "BTC",
"total_today_brl": 2203.11,
"category": "Category 2",
},
]
const grouped = data.reduce((acc,curr)=>{
const {category, ...data} = curr
const existing = acc[category]||[]
return {...acc, [category]:[...existing, data]}
},{})
const result = Object.entries(grouped).map(([name,data])=>({name, data}))
console.log(result)（為簡單起見，我id在結果等中包含了 ，但當然您可以選擇要保留的屬性并將它們x重命名y為reduce
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/428962.html
標籤：反应
上一篇：Redux-Toolkit中的RTK查詢正在回傳NextJS中未定義的資料，當我console.log資料時，它出現在控制臺中
下一篇：如何在反應中訪問嵌套的Obj？