Can I consolidate the entire API response to a table in React?

Question

I have 3 API endpoints which have different response bodies, and they have a common column 'ID'. I'm using React-Table hence have defined in a file 'Columns.js', which of the columns I would need from the response. But in the axios.get function it's giving me this error for each of the 3 endpoints:

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at accessRowsForColumn (react-table.development.js:1453)
    at react-table.development.js:1123
    at updateMemo (react-dom.development.js:15828)
    at Object.useMemo (react-dom.development.js:16368)
    at Object.useMemo (react.development.js:1499)
    at useTable (react-table.development.js:1115)
    at Datatable (Datatable.js:8)
    at renderWithHooks (react-dom.development.js:14969)
    at updateFunctionComponent (react-dom.development.js:17291)
    at beginWork (react-dom.development.js:18944)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3919)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3968)
    at invokeGuardedCallback (react-dom.development.js:4028)
    at beginWork$1 (react-dom.development.js:23775)
    at performUnitOfWork (react-dom.development.js:22614)
    at workLoopSync (react-dom.development.js:22548)
    at renderRootSync (react-dom.development.js:22514)
    at performSyncWorkOnRoot (react-dom.development.js:22131)
    at react-dom.development.js:11379
    at unstable_runWithPriority (scheduler.development.js:651)
    at runWithPriority$1 (react-dom.development.js:11325)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11374)
    at flushSyncCallbackQueue (react-dom.development.js:11362)
    at scheduleUpdateOnFiber (react-dom.development.js:21731)
    at dispatchAction (react-dom.development.js:16095)
    at App.js:20
    at async getData (App.js:16)

This is how my get function looks like:

useEffect(() => {
    async function getData() {
      await axios.all([
        axios.get('http://localhost:8080/api/v1/a/findAll'),
        axios.get('http://localhost:8080/api/v1/b/findAll'),
        axios.get('http://localhost:8080/api/v1/c/findAll')
      ])
      .then(response => {
        setData(response.data);
        console.log(response.data);
      });
    }
      getData();
  }, []);

Then passing this as the prop value to the component:

<Datatable columns={columns} data={data}/>

I'm assuming doing an axios.all won't work here, it works for one or two values, do I have to loops through the response? If so how? The IDs are coming from the API, I don't have them. Also for reference this is how my component looks like

export default function Datatable ({ columns, data }) {
  
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data
  })

  return (
    <div>
    return (
    <ReactBootStrap.Table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
      </ReactBootStrap.Table>
      </div>
  )
}

`ERR CONNECTION REFUSED` means the server is not reachable. For localhost it might be you need to start your api server `http://localhost:8080` — Vivek Bani, Jun 15 '21 at 04:44
Nowhere, the forEach is in the useTable function from the react-table package: > 585 | data.forEach((originalRow, rowIndex) => 586 | accessRow(originalRow, rowIndex, 0, undefined, rows) — Suparna Bose, Jun 15 '21 at 05:13
FYI you shouldn't use [axios.all](https://github.com/axios/axios#concurrency-deprecated), It is deprecated. Instead use `Promise.all`. — DecPK, Jun 15 '21 at 05:13
@SuparnaBose see how to use axios.all with `.then`. [How to use axios.all with .then](https://stackoverflow.com/questions/43664566/is-it-possible-to-use-axios-all-with-a-then-for-each-promise) — DecPK, Jun 15 '21 at 05:15

score 0 · Answer 1 · answered Jun 15 '21 at 05:30

You've to extract data from the response. Since response contains an array of all responses.

response.data will be undefined because there is no property named data on the array.

async function getData() {
  await axios
    .all([
      axios.get("https://jsonplaceholder.typicode.com/todos/1"),
      axios.get("https://jsonplaceholder.typicode.com/todos/2"),
      axios.get("https://jsonplaceholder.typicode.com/todos/3"),
    ])
    .then((response) => {
      const result = response.map((r) => r.data);
      console.log(result);
      // setData(result)
    });
}
getData();

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

Can I consolidate the entire API response to a table in React?

1 Answers1