Populate list items from json in React component

Question

I'm new to reactjs and i have a json object that i want to iterate through and populate list items in a react component. I get the json from server with an ajax call..

My ajax inside getData() method:

  $.ajax(
        {
            type: 'get',
            url: url,
            success: function (data) {
                this.setState({ data: JSON.parse(data) })  //or parse
            }.bind(this)
        },

    );

Constructor:

constructor() {
    super();
    this.state = {
        data: null
    };

    this.getData = this.getData.bind(this);
  }

Data looks like this:

{
    "commentID":25,
    "matchID":43234,
    "commentatorID":12537228724216704,
    "timeM":67,
    "timeRT":null,
    "action":"goal",
    "description":"aaaaaaaa"
},
{
    "commentID":27,
    "matchID":56,
    "commentatorID":12537228724216704,
    "timeM":14,
    "timeRT":null,
    "action":"",
    "description":"fgfafafaaffaafasfasf"
},

What i've already tried is to stringify the object but when i try to iterate through the string, it's alot of work when i only want to list "description" and "timeM" .

Should i run through the json object in the render method and create list items or are there other ways to do it? I'm looking for a good example on how to do this. Thanks!

Dane411 · Accepted Answer · 2018-11-22 13:39:33Z

2

To understand which react component life-cycle events one should setState in, you could refer to https://facebook.github.io/react/docs/react-component.html

to create the new array, you could simply

this.setState({
    data: resoponseArray.map(item => {description: item.description, timeM: item.timeM})
})

Edit

and to render you data

render () {
    return(
        <div>
            <ul>
                {
                    this.state.data.map((item, key) => {
                        return <li key={key}>{item.timeM} {item.description}</li>
                    })
                }
            </ul>
        </div>
    )
}

edited Nov 22, 2018 at 13:39

Dane411

8731 gold badge13 silver badges28 bronze badges

answered Apr 21, 2017 at 6:41

user5490729

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

5 Comments

John Ruddell Over a year ago

the problem with this approach is you have to loop over the array response more than once. It would be better to just store the object and then loop over one time in the render. Since all you are really doing is just storing the same thing just a few less keys.. You should change your answer to include how to render the items in a list with a map

kirkegaard Over a year ago

thank you! But, for some reason i get unexpected token after timeM in this.setState. any idea why? it want me to put " ; " there, but thats obviously wrong.

kirkegaard Over a year ago

the responeArray is the data collected from the success callback right?

kirkegaard Over a year ago

when i console.log the Data: [object Object],[object Object],[object Object]. So that is the structure.

John Ruddell Over a year ago

No what I was describing is what I knew the edited answer would show .map is used both once at the setState on the ajax callback and then in the render method. You don't need to map in the set state. Just do this. this.setState({data: JSON.parse(data)}) that removes the need for the extra unnecessary loop

Collectives™ on Stack Overflow

Populate list items from json in React component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related