如何將庫存數據從對象解析到數組中

Question

我正在使用Recharts庫來繪製一些股票市場數據。然而，簡單的線圖表需要像這樣

{name: 'Page A', uv: 4000, pv: 2400, amt: 2400} 

一個非常嚴格的數據結構我有看起來像這樣

Object 
AAPL:Array[4] 
0:Object 
adjClose:53.509768 
close:411.23 
date:"2012-01-02T18:30:00.000Z" 
high:412.499989 
low:408.999989 
open:409.399998 
symbol:"AAPL" 
volume:75555200 
__proto__:Object 
1:Object 
2:Object 
3:Object 
length:4 
__proto__:Array[0] 
GOOGL:Array[4] 
TSLA:Array[4] 

其中每個對象對特定股票表示一天以該股票數據。好像我需要從去一個數據結構，這樣

data=[ 
    {date: 'Jan 12, 2012', AAPL: {open: 12, close: 15}, TSLA: {open: 15, close: 21}, GOOGL: {open: 125, close: 21}}, 
    {date: 'Jan 13, 2012', AAPL: {open: 15, close: 12}, TSLA: {open: 21, close: 155}, GOOGL: {open: 21, close: 25}} 
    ... 
    ... 
    ... 
]; 

我現在還不能完全肯定Recharts將繪製數據我想，即使這樣的方式，但它似乎是最有可能的選擇。

只是爲了澄清，我希望它標繪的方式爲相同的圖表元件上的每個股票單獨的線圖表

Answer 1

可以通過每個符號迭代，然後建立利用一個簡單的循環中的數據對象，以子循環插入每個符號。這將假設每個符號包含相同日期的相同數組。

// result object 
let result = []; 

// get the ticker list from the object keys 
const tickers = Object.keys(yourDataObject); 

// get number of days for first ticker by looking at it's array length 
const days = yourDataObject[tickers[0]].length; 

// iterate through the days to parse the data 
for (let i = 0; i < days; i++) { 
    // initiate row data with date of the first symbol 
    let rowData = { 
    date: new Date(yourDataObject[tickers[0]][i]).toLocaleDateString(), 
    } 
    // iterate through the tickers for that day 
    symbols.forEach(symbol => { 
    const tickerDayData = yourDataObject[symbol][i]; 
    rowData[ticker] = { 
     open: ~~tickerDayData.open, // using ~~ to get the int value, you could round if you'd prefer 
     close: ~~tickerDayData.close, 
    }; 
    }); 
    // add to main result array 
    result.push(rowData); 
} 

如果您提供了實際的數據，我們可以在控制檯中運行此測試。