How to pass array of Objects to table

Question

I am getting some confusion in sending data. Bellow given is response from rest. I want to send this given data in table.

data = [ 
  {name :'user 1' , teams : [ {id: 1, name : team 1}, {id :2, name :'team 2'}..]}
{name : 'user 2',teams :[ {id: 2, name: team 2},{id: 4, name: team 4} ..] 
]

Expected result

Username Teams

user 1 team 1 team 2 user 2 team 2 team 4

Teams has to be Clickable, while passing team names, want to pass team id also as id. while clicking on table some particular event has to be occurred so i show able to click. Please help to implement this. Thanks

Answer 1

If you are confused with the table structure below is a possible way to bind such array into table. Assuming that you have set the state with data once the rest returns the array. Following is the snippets of react render method where you will bind the table html. Hope this helps.

<table className="table table-responsive table-striped center-align" >
    <thead>
        <tr >
            <th scope="col">User</th>
            <th scope="col" >Team</th>
        </tr>

    </thead>
    <tbody>
        {this.state.data.map((dataItem) => {
            let count = 0;
            dataItem['teams '].map((item) => {
                <tr>
                    {++count == 1 ?
                        <td rowSpan={dataItem['teams'].length}>{dataItem.name}</td>
                        : null
                    }
                    <td>
                        {item.name}
                    </td>
                </tr>
            })
        })
        }
    </tbody>
</table>