Ok, so I've been reading all the "map an array of objects in React" posts, and nothing seems to be working for me. So sorry if this seems like a repeat question, but I need an answer that works for my project. I'm using Fetch to pull data from yfinance to create an array of objects from the JSON created by my server.py. That seems to work fine, but it won't map once I have it fetched. My fetch code looks like this:
const [data, setData] = useState([]);
useEffect(() => {
fetch("/history")
.then((res) => res.json())
.then((data) => {
setData(data);
console.log(data);
});
}, []);
In the console, I get an array as expected:
{schema: {…}, data: Array(19)}
data: Array(19)
0: {Date: '2022-02-09T00:00:00.000Z', Open: 935, High: 946.2700195312, Low: 920, Close: 932, …}
1: {Date: '2022-02-10T00:00:00.000Z', Open: 908.3699951172, High: 943.8099975586, Low: 896.700012207, Close: 904.549987793, …}
2: {Date: '2022-02-11T00:00:00.000Z', Open: 909.6300048828, High: 915.9600219727, Low: 850.700012207, Close: 860, …}
3: {Date: '2022-02-14T00:00:00.000Z', Open: 861.5700073242, High: 898.8800048828, Low: 853.1500244141, Close: 875.7600097656, …}
4: {Date: '2022-02-15T00:00:00.000Z', Open: 900, High: 923, Low: 893.3800048828, Close: 922.4299926758, …}
5: {Date: '2022-02-16T00:00:00.000Z', Open: 914.049987793, High: 926.4299926758, Low: 901.2100219727, Close: 923.3900146484, …}
6: {Date: '2022-02-17T00:00:00.000Z', Open: 913.2600097656, High: 918.5, Low: 874.0999755859, Close: 876.3499755859, …}
7: {Date: '2022-02-18T00:00:00.000Z', Open: 886, High: 886.8699951172, Low: 837.6099853516, Close: 856.9799804688, …}
8: {Date: '2022-02-22T00:00:00.000Z', Open: 834.1300048828, High: 856.7299804688, Low: 801.0999755859, Close: 821.5300292969, …}
9: {Date: '2022-02-23T00:00:00.000Z', Open: 830.4299926758, High: 835.299987793, Low: 760.5599975586, Close: 764.0399780273, …}
10: {Date: '2022-02-24T00:00:00.000Z', Open: 700.3900146484, High: 802.4799804688, Low: 700, Close: 800.7700195312, …}
11: {Date: '2022-02-25T00:00:00.000Z', Open: 809.2299804688, High: 819.5, Low: 782.4000244141, Close: 809.8699951172, …}
12: {Date: '2022-02-28T00:00:00.000Z', Open: 815.0100097656, High: 876.8599853516, Low: 814.7100219727, Close: 870.4299926758, …}
13: {Date: '2022-03-01T00:00:00.000Z', Open: 869.6799926758, High: 889.8800048828, Low: 853.7800292969, Close: 864.3699951172, …}
14: {Date: '2022-03-02T00:00:00.000Z', Open: 872.1300048828, High: 886.4799804688, Low: 844.2700195312, Close: 879.8900146484, …}
15: {Date: '2022-03-03T00:00:00.000Z', Open: 878.7700195312, High: 886.4400024414, Low: 832.5999755859, Close: 839.2899780273, …}
16: {Date: '2022-03-04T00:00:00.000Z', Open: 849.0999755859, High: 855.6500244141, Low: 825.1599731445, Close: 838.2899780273, …}
17: {Date: '2022-03-07T00:00:00.000Z', Open: 856.299987793, High: 866.1400146484, Low: 804.5700073242, Close: 804.5800170898, …}
18: {Date: '2022-03-08T00:00:00.000Z', Open: 795.5300292969, High: 849.9899902344, Low: 782.1699829102, Close: 824.4000244141, …}
length: 19
[[Prototype]]: Array(0)
schema: {fields: Array(8), primaryKey: Array(1), pandas_version: '1.4.0'}
[[Prototype]]: Object
Now, when I try to map it, I seem to be doing something wrong because when I do this (I've extracted the relevant code, with the most relevant being the data.map function after the opening tbody tag):
return (
<Col>
<h2>My Portfolio</h2>
<Table striped bordered hover size="sm">
<tbody>
{data.map(({ overviewRow }) => (
<tr>
{/* key={overviewRow.Close}
<td>{overviewRow.Date}</td>
<td>{overviewRow.Open}</td> */}
<td>
<NumberFormat
// value={overviewRow.High * 100}
displayType={"text"}
thousandSeparator={true}
decimalScale={2}
suffix={"%"}
/>
</td>
<td>
<NumberFormat
// value={overviewRow.Close}
displayType={"text"}
thousandSeparator={true}
decimalScale={2}
prefix={"$"}
/>
</td>
<td>
<NumberFormat
// value={overviewRow.Volume}
displayType={"text"}
thousandSeparator={true}
decimalScale={7}
fixedDecimalScale={false}
/>
</td>
<td>
<NumberFormat
// value={overviewRow.Dividends}
displayType={"text"}
thousandSeparator={true}
decimalScale={7}
prefix={"$"}
/>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
</div>
);
I get a "data.map is not a function" error. This seems odd since that is only supposed to happen if I'm not working with an array, which I clearly am. I can't seem to figure out if I'm referencing the wrong thing or what, and it's driving me nuts. I've read so many things on mapping arrays of objects, but like I said before, none of the solutions seem to fix my problem and I don't know why. So again, sorry if this seems like a repeat question, but I've got to figure this out. Thanks for being patient and helping!
CodePudding user response：
Try this
data?.map(({ overviewRow }) => ....
If this code works I will update this answer and explain what happened with this incident
CodePudding user response：
So it turns out that the data array output from yfinance is inside an object, which I missed until I read the console data more closely and realized the setup, which looks like this:
{schema: {…}, data: Array(19)}
That's clearly an object. The way I fixed it was to point to the data array inside of the object by adding a ".data" to the setData in my fetch, so instead of this:
const [data, setData] = useState([]);
useEffect(() => {
fetch("/history")
.then((res) => res.json())
.then((data) => {
**setData(data);**
console.log(data);
});
}, []);
it now looks like this:
const [data, setData] = useState([]);
useEffect(() => {
fetch("/history")
.then((res) => res.json())
.then((data) => {
**setData(data.data);**
console.log(data);
});
}, []);
and now it works!
I want to leave this here in case anyone else misses what I did. It seems obvious in hindsight, but these things can be very easy to overlook in the moment.