개체에서 배열로 주식 데이터를 구문 분석하는 방법

Question

Recharts 라이브러리를 사용하여 일부 주식 시장 데이터를 계획하고 있습니다. 그러나, 간단한 라인 차트는 내가 특정 종목에 대한 각 개체가 해당 종목에 대한 일일를 나타냅니다이

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] 

과 같은 데이터가 너무

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

같은 매우 엄격한 데이터 구조를 필요로한다. 나는 여전히 Recharts 데이터를 I도이 방법을 원하는 방식으로 그릴 것을 완전히 확실하지 오전이

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}} 
    ... 
    ... 
    ... 
]; 

같은 데이터 구조에 그에서 갈 필요 것 같다,하지만 가장 가능성이 옵션을 보인다.

그냥 명확히하기 위해, 나는 그것이 그려 원하는 방식으로 같은 차트 요소의 각 종목에 대한 별도의 선 차트는

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

실제 데이터를 제공 한 경우 테스트를 위해 콘솔에서 실행할 수 있습니다.