create table from JSON object in react

Question

I am creating a table dynamically in React with the API response as it is as it receives.

data = {"name":"tom", "age":23, "group":null, "phone":xxx}

It is working fine with that, but the group key sometimes contains another object, so I want to create a sub-table whenever there is another object inside a key.

For example:

data = {"name":"tom", "age":23, "group":{"id":123, "joined_at":12-jan-2022}, "phone":xxx}

My current code is:

<table>
  {Object.keys(data).map(index=> (
    <tr>
      <td>{index}</td>
      <td>{data[index]?.toString()}</td>
    </tr>
   ))}
</table>

May I know what did you try to solve your problem and are you facing any errors while running it? — mc-user
– mc-user, Commented May 13, 2022 at 5:04
Yes, I tried many methods but run out of ides so posted it, I also tried to add a if condition to check type of data so create another sub-table but it is not happening inside the map function! — DevPy
– DevPy, Commented May 13, 2022 at 5:09

Aneesh · Accepted Answer · 2022-05-13 07:05:25Z

The code you have shared would change as follows:

<table>
    {Object.keys(data).map((item, index) => {
        if (group) {
            return (
                <>
                    <tr>
                        <td>{index}</td>
                        <td>{item.toString()}</td>
                    </tr>
                    <tr>
                        <table>
                            <tr>
                                <td>{group.id}</td>
                                <td>{group.joined_at}</td>
                            </tr>
                        </table>
                    </tr>
                </>
            );
        }
        return (
            <tr>
                <td>{index}</td>
                <td>{item.toString()}</td>
            </tr>
        );
    })}
</table>;

You can fix the formatting as per your needs but this is essentially how you would create a sub-table based on the value of group

A slightly improved version would be :

const normalTableRow = (index, item) => {
    return (
        <tr>
            <td>{index}</td>
            <td>{item.toString()}</td>
        </tr>
    );
};

<table>
    {Object.keys(data).map((item, index) => {
        if (group) {
            return (
                <>
                    {normalTableRow(index, item)}
                    <tr>
                        <table>
                            <tr>
                                <td>{group.id}</td>
                                <td>{group.joined_at}</td>
                            </tr>
                        </table>
                    </tr>
                </>
            );
        }
        return normalTableRow(index, item);
    })}
</table>;

EDIT: updating solution based on comment

 const normalTableRow = (index, item) => {
    return (
        <tr>
            <td>{index}</td>
            <td>{item.toString()}</td>
        </tr>
    );
};

const isObject = (value) => {
    return typeof value === 'object' && !Array.isArray(value) && value !== null;
};

<table>
    {Object.keys(data).map((item, index) => {
        let subTables = Object.keys(item).map((key) => {
            if (isObject(item[key])) {
                return (
                    <tr>
                        <table>
                            <tr>
                                {Object.keys(item[key]).map((subKey) => {
                                    return <td>{item[key][subKey]}</td>;
                                })}
                            </tr>
                        </table>
                    </tr>
                );
            }
        });

        return (
            <>
                {normalTableRow(index, item)}
                {[...subTables]}
            </>
        );
    })}
</table>;

Hi @Aneesh, thank you for the answer, but it is not working, also you hardcoded the group, but the may contains more that the value mentioned in the data, as I created row and data dynamically, so it just picks up value from the data we don't have to know what it contains
Do you mean group might be an array? It would help if you could share the exact data you are looking to use
No, I mean there are more data that value can be object not only group, for eg: data={"name": {"fname":"tom", "lname":"hardy"}} now here name can be simple string and might be object, so we just have to distinguish it at runtime and create table dynamically, without knowing what data will be coming from response, as the code mentioned in the question, it dynamically create table irrespective of data
It is working fine, if I convert object into string and show, but I want the data in that field should also show like table!
I've updated the answer to handle any of your keys being objects. Based on the current implementation, if any key is an object, you'll get a sub table. You can change this based on your needs

Collectives™ on Stack Overflow

create table from JSON object in react

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related