React JS - iterate through external JSON file to populate table

Question

I am new to the React world and am struggling to get my JSON data to display in a table.

class GetUnassignedUsers extends React.Component {
    constructor () {
        super();
        this.state = {
            data:[]
        };
    }
    componentDidMount () {
        fetch("http://localhost/dashboard/?action=unassignedUsers.getUnassingedUsers", {
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(json => this.setState({data: json}));
    }
    render () {
        console.log("teams", this.state.data.teams);
        console.log("unassignedUsers", this.state.data.unassignedUsers);
        var teams = this.state.data.teams;
        var unassignedUsers = this.state.data.unassignedUsers;
        return (
            <tr>
                <td>
                    {unassignedUsers.ID}
                </td>
                <td>
                    23/08/2015
                </td>
                <td>
                    Tradeprint
                </td>
                <td>
                    [email protected]
                </td>
                <td>
                    John Bloggs
                </td>
                <td>
                    Aberfeldy
                </td>
                <td>
                    AD9 8QR
                </td>
                <td>
                    Unassigned
                </td>
            </tr>
        );
    }
};

export default GetUnassignedClients;

I am accessing the JSON and returning it in the render method in the 2 console logs (console.log("teams", this.state.data.teams); and console.log("unassignedUsers", this.state.data.unassignedUsers);).

My issue is below that where I tidy up the dot notation by declaring the 2 variables for teams and unassignedUsers. Then in my return I want to produce a row for each JSON record with the unassignedUser ID in the first <td>.

Possible duplicate of Iterate over json atributes to form table in React? — imjared
– imjared, Commented Jan 30, 2017 at 15:18
I had a look at this question but it seemed to be quite different to mine despite the title being similar. The way their code is written is quite different. This question is using ES6 so there is quite a lot of differences in that alone. Also they are accessing JSON stored in a variable and not saved to state after being fetched from an external source. — Sprose
– Sprose, Commented Feb 1, 2017 at 10:12

Mike · Accepted Answer · 2017-01-30 15:25:13Z

1

var unassignedUsers = this.state.data.unassignedUsers; // Probably it returns array of users

So all you have to do:

var rows = unassignedUsers.map(function(user) {
    return (<tr>
        <td>{user.ID}</td>
        <td>{user.somethingElse}</td>
      </tr>)
});
return (
   <table>
   <tbody>
       {rows}
   </tbody>
   </table>
)

answered Jan 30, 2017 at 15:25

Mike

7871 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sprose Over a year ago

Yeah it returns an array of users. I have implemented this and now I get the error: Uncaught TypeError: Cannot read property 'map' of undefined I thought this was due to componentDidMount running after it tries (and fails) to render the first time - but then it re-renders the second time so surely that should then return the data?

Mike Over a year ago

Because you defined initial state like this: this.state = { data:[] }; But you are not using data as array you are using data as object and inside this object you have to give default value for unassignedUsers so this.state = { data: { unassignedUsers: [] } }; If you define initial state like this in first render unassignedUsers will be mapped as an empty array so there will not be any unexpected errors.

Mayank Shukla · Accepted Answer · 2017-01-30 15:25:09Z

To create the table row dynamically, u need to iterate the json and create the ui items, like this:

return (
   <table>
     <tbody>
      {unassignedUsers.map((item,index)=>{
        return <tr key={index}>
            <td>
                {item.ID}
            </td>
            <td>
                23/08/2015
            </td>
            <td>
                Tradeprint
            </td>
            <td>
                [email protected]
            </td>
            <td>
                John Bloggs
            </td>
            <td>
                Aberfeldy
            </td>
            <td>
                AD9 8QR
            </td>
            <td>
                Unassigned
            </td>
        </tr>
      })  
     </tbody> 
   </table> 
);

prosti · Accepted Answer · 2017-01-30 15:18:48Z

0

In your case, I would use the existing components, like Reactable Table as a great jump start.

import React from "react";
import ReactDOM from "react-dom";;
import Reactable from "reactable";
var Table = Reactable.Table;
ReactDOM.render(
    <Table className="table" data={[
        { Name: 'Griffin Smith', Age: 18 , Position: 'Schoolar'},
        { Age: 23,  Name: 'Lee Salminen', Position: 'Student'},
        { Age: 28, Name: 'Mike Kofs', Position: 'Developer' },
    ]} />,
    document.getElementById('app')
);

answered Jan 30, 2017 at 15:18

prosti

46.9k19 gold badges199 silver badges161 bronze badges

Collectives™ on Stack Overflow

React JS - iterate through external JSON file to populate table

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related