Getting data from a JSON array and setting states based on the data using loop in React

Question

Suppose, I'm getting JSON array and want to setState as I'm getting that array in my component.

        for( var follower_id = 0; follower_id < followers_data.length; follower_id++) {
          this.setState({
            followers_data_username[followers_data_username.length] = followers_data[follower_id].login
          });
          console.log(followers_data_username[0]);
        }

But I don't know how to set up my getInitialState if I'm going to use an array. Also, I don't think that I can setState of an array.

I'm new to React. So, any help or pointing to the right direction would be highly appreciated.

Consider the JSON to be something similar to this: https://api.github.com/users/ghoshnirmalya/followers

why are you trying to set a state for each element in the json array? that is just going to override any data from the previous row... are you trying to list out a table on the front end? — John Ruddell
– John Ruddell, Commented Nov 11, 2015 at 8:01
yes. i'm trying to get all the data from the json and list out a table. what will be the best way to do that? — Nirmalya Ghosh
– Nirmalya Ghosh, Commented Nov 11, 2015 at 8:02
I'm trying to follow the syntax which is provided in the react tutorial (facebook.github.io/react/docs/tutorial.html). — Nirmalya Ghosh
– Nirmalya Ghosh, Commented Nov 11, 2015 at 8:05

John Ruddell · Accepted Answer · 2016-07-11 17:25:38Z

1

you should use a map function on your data like so

render(){
    let rows = this.state.followers_data.map( (follower, i) => <TableRow follower={follower} key={i} />);

    return (
        <table>
            <tbody>{rows}</tbody>
        </table>
    );
}

and your row component would look something like this..

const TableRow = (props) => {
    return (
        <tr>
            <td>{this.props.follower.login}</td>
        </tr>
    );
};

now this is just a basic example... you need to model it to work for your project.. but you should follow this pattern for all of the json data... you have a table and in the tbody you render rows.. which is an array of components that are generated off of each json object in the array.

edited Jul 11, 2016 at 17:25

answered Nov 11, 2015 at 8:09

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

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

2 Comments

Nirmalya Ghosh Over a year ago

What if I'm loading the JSON from another url using onClick function? Will this work for that scenario also?

John Ruddell Over a year ago

@NirmalyaGhosh yes that is what I was expecting you to have.. your onClick function should call this.setState({followers_data: whatever_your_data_is}) which will re-render the rows with whatever the data is that comes back

Collectives™ on Stack Overflow

Getting data from a JSON array and setting states based on the data using loop in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related