Having trouble displaying values retrieved from multiple APIs to Ag-Grid rows (React)

Question

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:

Table Output

Also this is the console.log of the rowData

console.log(rowData)

Please can someone help me figure out how to reference the values from the array of objects?

Thank you

Answer 1

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).