I am trying to loop through the JSON from my API call so that I can create a list in the component UI. Here is my code (see the console log). I am using redux to make the API call
useEffect(() => {
const fetchStocks = async () => {
try {
const response = await getStocks({
tickerArray,
type
}).unwrap();
console.log(response.data);
const dataArray = await response.data
const finalArray = await dataArray.filter((each) => each.length !== 1 )
} catch (error) {
console.log(error)
}
}
fetchStocks();
// eslint-disable-next-line
}, [])
Here is a sample of the API call data
[
[
{
1. Information: "Monthly Adjusted Prices and Volumes"
2. Symbol: "AAPL"
3. Last Refreshed: "2022-06-28 16:00:01"
4. Time Zone: "US/Eastern"
},
{
1. open: "101.0000"
2. high: "118.0000"
3. low: "91.0600"
4. close: "102.8100"
5. adjusted close: "0.7848"
6. volume: "84091200"
7. dividend amount: "0.0000"
}
],
[
{
1. Information: "Monthly Adjusted Prices and Volumes"
2. Symbol: "MSFT"
3. Last Refreshed: "2022-06-28 16:00:01"
4. Time Zone: "US/Eastern"
},
{
1. open: "101.0000"
2. high: "118.0000"
3. low: "91.0600"
4. close: "102.8100"
5. adjusted close: "0.7848"
6. volume: "84091200"
7. dividend amount: "0.0000"
}
],
[
{
1. Information: "Monthly Adjusted Prices and Volumes"
2. Symbol: "BYD"
3. Last Refreshed: "2022-06-28 16:00:01"
4. Time Zone: "US/Eastern"
},
{
1. open: "101.0000"
2. high: "118.0000"
3. low: "91.0600"
4. close: "102.8100"
5. adjusted close: "0.7848"
6. volume: "84091200"
7. dividend amount: "0.0000"
}
],
[
{
1. Information: "Monthly Adjusted Prices and Volumes"
2. Symbol: "SEC"
3. Last Refreshed: "2022-06-28 16:00:01"
4. Time Zone: "US/Eastern"
},
{
1. open: "101.0000"
2. high: "118.0000"
3. low: "91.0600"
4. close: "102.8100"
5. adjusted close: "0.7848"
6. volume: "84091200"
7. dividend amount: "0.0000"
}
]
]
Here is how I want to structure the data
| Stock Symbol | closing price |
|---|---|
| AAPL | 120 |
| MSFT | 300 |
| BYD | 34 |
| SEC | 120 |
CodePudding user response：
to render that list you first need to normalize that data (make this data more convenient to render), API is returning array of arrays with objects, more better is to transform this structure to more flatten - array of objects, I suppose in your case its not illegal to merge together this objects inside each array, so in final stage, before rendering, you can have smth like that:
[
{
1. Information: "Monthly Adjusted Prices and Volumes"
2. Symbol: "AAPL"
3. Last Refreshed: "2022-06-28 16:00:01"
4. Time Zone: "US/Eastern"
1. open: "101.0000"
2. high: "118.0000"
3. low: "91.0600"
4. close: "102.8100"
5. adjusted close: "0.7848"
6. volume: "84091200"
7. dividend amount: "0.0000"
},
{
1. Information: "Monthly Adjusted Prices and Volumes"
2. Symbol: "MSFT"
3. Last Refreshed: "2022-06-28 16:00:01"
4. Time Zone: "US/Eastern"
1. open: "101.0000"
2. high: "118.0000"
3. low: "91.0600"
4. close: "102.8100"
5. adjusted close: "0.7848"
6. volume: "84091200"
7. dividend amount: "0.0000"
}
]
this function can help you with, all you need after is to save in state returning value and render that state:
const normalizeData = (data) => {
return data.flatMap((d) => {
return { ...d[0], ...d[1] };
});
};
CodePudding user response：
Your object wasn't properly structured and also this worked perfect
import react from 'react';
const Cost = () => {
const data = [
[
{
Information: "Monthly Adjusted Prices and Volumes",
Symbol: "AAPL",
LastRefreshed: "2022-06-28 16:00:01",
TimeZone: "US/Eastern",
},
{
open: "101.0000",
high: "118.0000",
low: "91.0600",
close: "102.8100",
adjustedClose: "0.7848",
volume: "84091200",
dividendAmount: "0.0000",
}
],
[
{
Information: "Monthly Adjusted Prices and Volumes",
Symbol: "MSFT",
LastRefreshed: "2022-06-28 16:00:01",
TimeZone: "US/Eastern",
},
{
open: "101.0000",
high: "118.0000",
low: "91.0600",
close: "102.8100",
adjustedClose: "0.7848",
volume: "84091200",
dividendAmount: "0.0000",
}
],
[
{
Information: "Monthly Adjusted Prices and Volumes",
Symbol: "BYD",
LastRefreshed: "2022-06-28 16:00:01",
TimeZone: "US/Eastern",
},
{
open: "101.0000",
high: "118.0000",
low: "91.0600",
close: "102.8100",
adjustedClose: "0.7848",
volume: "84091200",
dividendAmount: "0.0000",
}
],
[
{
Information: "Monthly Adjusted Prices and Volumes",
Symbol: "SEC",
LastRefreshed: "2022-06-28 16:00:01",
TimeZone: "US/Eastern",
},
{
open: "101.0000",
high: "118.0000",
low: "91.0600",
close: "102.8100",
adjustedClose: "0.7848",
volume: "84091200",
dividendAmount: "0.0000",
}
]
]
// loop through data and create a new array with the symbol and close prices
const newData = data.map(item => {
return {
symbol: item[0].Symbol,
close: item[1].close
}
}
)
// sort the new array by close price
const sortedData = newData.sort((a, b) => {
return a.close - b.close
}
)
// create a new array with the top symbols
const top = sortedData.slice(0)
// create a new array with the bottom symbols
// create a new array with the top symbols and their close prices
const topWithClose = top.map(item => {
return {
symbol: item.symbol,
close: item.close
}
}
)
return (
<div className="cost">
{/* map symbol and close price */}
<table style={{width:'400px'}}>
<th style={{display:'flex'}}>
<tr>Stock Symbol</tr>
<tr>Close Price</tr>
</th>
<tbody>
{topWithClose.map(item => {
return (
<tr>
<td>{item.symbol}</td>
<td>{item.close}</td>
</tr>
)
}
)}
</tbody>
</table>
</div>
)
}
export default Cost;