Javascript - how to display array of nested object in table using react

learntocode2468
July 13, 2023
284 views
5 votes
5 Answers

I have nested array object and need to display as table format using react.
I tried below code and got stuck how to display as such

var countdetails = [
  {
    enabled: { IN: 354, MY: 181 },
    pending: { IN: 34, MY: 11 },
    total: { IN: 388, MY: 192 }
  }
];

export default function App() {
  return (
    <div className="App">
      <table>
        {countdetails.map((e) => (
          <>
            <tr>
              <td>countries</td>
              <td>enabled</td>
              <td>pending</td>
            </tr>
            <tr>
              <td>{Object.keys(e.enabled)}</td>
              <td>{Object.values(e.enabled)}</td>
              <td>{Object.values(e.pending)}</td>
            </tr>
          </>
        ))}
      </table>
    </div>
  );
}

Expected Output

countries enabled pending
IN         354     34
MY         181      11

Answers

Your data is hard to map due to its irregularity structure.
If you really want to map that data
Here you go

 <table>
                            <tr>
                                <td>countries</td>
                                <td>enabled</td>
                                <td>pending</td>
                            </tr>
                            {countdetails.map((e, index) => (
                                <>

                                    <tr>
                                        {Object.keys(e.enabled).map((a, i) => {
                                            return (
                                                <tr>{a}</tr>
                                            )
                                        })}

                                        <td>{Object.values(e.enabled).map((a, i) => {
                                            return (
                                                <tr>{a}</tr>
                                            )
                                        })}
                                        </td>

                                        <td>
                                            {Object.values(e.pending).map((a, i) => {
                                                return (
                                                    <tr>{a}</tr>
                                                )
                                            })}
                                        </td>
                                       
                                    </tr>
                                </>
                            ))}
                        </table>

Hope this helps.

The UI is driven by data. Convert to a data structure more suitable for tables.

const columns = [
    { title: 'Countries ', dataIndex: 'countries' },
    { title: 'Enabled', dataIndex: 'enabled' },
    { title: 'Pending', dataIndex: 'pending' },
];
const dataSource = [
    {
        countries: 'IN',
        enabled: 354,
        pending: 34,
    },
    {
        countries: 'MY',
        enabled: 181,
        pending: 11,
    },
];

export default function App() {
    return (
        <div className="App">
            <table>
                <tr>
                    {columns.map((col) => (
                        <th>{col.title}</th>
                    ))}
                </tr>
                {dataSource.map((data) => {
                    return (
                        <tr>
                            {columns.map((col) => (
                                <td>{data[col.dataIndex]}</td>
                            ))}
                        </tr>
                    );
                })}
            </table>
        </div>
    );
}

Output:

codesandbox

Here is the code to achieve your output:

Link: https://codesandbox.io/s/stackoverflow-solution-jgz6nw

Full code:

var countdetails = [
  {
    enabled: { IN: 354, MY: 181 },
    pending: { IN: 34, MY: 11 },
    total: { IN: 388, MY: 192 }
  }
];

export default function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <th>countries</th>
          <th>enabled</th>
          <th>pending</th>
        </tr>
        {Object.entries(countdetails[0].enabled).map(
          ([country, enabledCount]) => (
            <tr key={country}>
              <td>{country}</td>
              <td>{enabledCount}</td>
              <td>{countdetails[0].pending[country]}</td>
            </tr>
          )
        )}
      </table>
    </div>
  );
}

This code output will looks like your expected output.

Screenshot of output:

In my opinion it is better to just spell it out in this case. Instead of using fancy Object methods.

Either this or convert to data structure more suitable for tables as described here earlier.

var countdetails = [
  {
    enabled: { IN: 354, MY: 181 },
    pending: { IN: 34, MY: 11 },
    total: { IN: 388, MY: 192 }
  }
];

export default function App() {
  return (
    <div className="App">
      <table>
        {countdetails.map((e) => (
          <>
            <tr>
              <td>countries</td>
              <td>enabled</td>
              <td>pending</td>
            </tr>
            <tr>
              <td>IN</td>
              <td>{e.enabled.IN}</td>
              <td>{e.pending.IN}</td>
            </tr>
            <tr>
              <td>MY</td>
              <td>{e.enabled.MY}</td>
              <td>{e.pending.MY}</td>
            </tr>
          </>
        ))}
      </table>
    </div>
  );
}

As mentioned in Lin Du’s answer, it is advised to transform your data more suitable to render table data for UI.

In case you don’t have control over data and it is from external source, then you can transform your data as below

// Transform function
const transformData = (data) => {
  let result = [];

  // Loop over each item in data (here it's only one item but could be more)
  for (let item of data) {

    // Iterate over each property in 'enabled', 'pending', 'total' which are country codes
    for (let country in item.enabled) {
      let obj = {};

      // The current country code is used to look up values in the 'enabled', 'pending', 'total' objects
      obj['countries'] = country;
      obj['enabled'] = item.enabled[country];
      obj['pending'] = item.pending[country];
      obj['total'] = item.total[country]; // Included 'total' here

      // Each constructed object is pushed into the result array
      result.push(obj);
    }
  }

  return result;
};

var countdetails = [
  {
    enabled: { IN: 354, MY: 181 },
    pending: { IN: 34, MY: 11 },
    total: { IN: 388, MY: 192 },
  },
];

const dataSource = transformData(countdetails);

console.log(dataSource);
// Now it will include 'total' also:
// [
//   {
//     countries: 'IN',
//     enabled: 354,
//     pending: 34,
//     total: 388
//   },
//   {
//     countries: 'MY',
//     enabled: 181,
//     pending: 11,
//     total: 192
//   }
// ]

Now use this transformed data to build your table

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – how to display array of nested object in table using react

Answers