I'm having trouble with this issue for the past couple of days and I've tried somethings but they haven't been working.
I'm trying to display some stock information onto the table. It works fine for one stock however when I try to get multiple stock information and combine it, I get blank values.
Please have a look at the code
useEffect(() => {
(async () => {
try {
let data = []
data.push(await getAppleData())
data.push(await getIBMData())
console.log(data)
setRowData(await data);
setLoading(false);
} catch (err) {
setError(err);
setLoading(false);
}
})();
}, []);
Here is what one of the get[name]Data() functions look like:
async function getAppleData() {
const url = `https://financialmodelingprep.com/api/v3/profile/AAPL?apikey=APIKEY`;
let res = await fetch(url);
let data1 = await res.json();
return data1;
}
In the columns section I have tried these specifications but they aren't working
const columns = [
{ headerName: "Symbol", field: "symbol",
valueGetter: function (params) {
return params.data.symbol;
},},
{ headerName: "Price", field: "price" },
{ headerName: "Industry", field: "industry" }
];
The output I get is this:
Also this is the console.log of the rowData
Please can someone help me figure out how to reference the values from the array of objects?
Thank you
Array.prototype.push will append the entire response to the data array, and looks like the response is an array containing a single object, so data contains two arrays instead of two objects.
To append the objects instead of the arrays, you can use Array.prototype.concat.
useEffect(() => {
(async () => {
try {
let data = [].concat(await getAppleData(), await getIBMData());
console.log(data);
setRowData(data);
setLoading(false);
} catch (err) {
setError(err);
setLoading(false);
}
})();
}, []);
You can also use the Spread syntax, as shown below:
useEffect(() => {
(async () => {
try {
let data = [...(await getAppleData()), ...(await getIBMData())];
console.log(data);
setRowData(data);
setLoading(false);
} catch (err) {
setError(err);
setLoading(false);
}
})();
}, []);
Also, awaiting data makes no sense, so simply do setRowData(data).