How to sort JSON data in ReactJS

Question

Can anyone help me with the sorting of json data in ReactJs please? Right now it is not working properly for me. Also if i want to sort as per the title, would it be same? Thanks.

I am trying as below:

componentDidMount() 
{
        fetch('https://jsonplaceholder.typicode.com/posts').then((res) => res.json())
            .then((data) => {
                data.sort(function (a, b) {
                    return a.userId> b.userId;
                })
                data.sort();
                this.setState({data: data});

            });

    }

    render() {
        return (
            <div>
                <br/><br/>
                <br/><br/>

                < table className="table">

                    <th>User Id</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Action</th>
                    <tbody>{this.state.data.map(function (item, key) {
                        return (
                            <tr key={key}>
                                <td>{item.userId}</td>
                                <td>{item.id}</td>
                                <td>{item.title}</td>
                                <td>{item.body}</td>
                            </tr>
                        )

                    })}</tbody>
                </table>

            </div>
        )
    }

The second invocation to data.sort() (without custom sort function logic) is overwriting the initial sort logic which is why your custom logic of comparing a.userID > b.userId is not achieving any expected results. @gaiazov Answer below a.title - b.title answers the sort-by-title question. — Tobiah Rex
– Tobiah Rex, Commented Jan 29, 2018 at 0:02

gaiazov · Accepted Answer · 2018-01-28 23:51:11Z

7

The compareFunction in data.sort needs to return an integer, according to the docs. When comparing numbers, you can simply subtract a number from b number, in your case, a.userId - b.userId.

This code works

fetch('https://jsonplaceholder.typicode.com/posts').then((res) => res.json())
    .then((data) => {
        data.sort((a, b) => a.userId - b.userId);
        this.setState({data: data});

    });

answered Jan 28, 2018 at 23:51

gaiazov

1,96014 silver badges26 bronze badges

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

Comments

salman.zare · Accepted Answer · 2018-01-28 23:59:39Z

3

@mshrivas, please test the following code for sorting by title :

componentDidMount()
{
  fetch('https://jsonplaceholder.typicode.com/posts').then((res) => res.json())
    .then((data) => {
      data.sort((a,b) => a.title.localeCompare(b.title));
      this.setState({data: data});
    });

}

render() {
  return (
    <div>
      <br/><br/>
      <br/><br/>

      < table className="table">

        <th>User Id</th>
        <th>Name</th>
        <th>Address</th>
        <th>Action</th>
        <tbody>{this.state.data.map(function (item, key) {
          return (
            <tr key={key}>
              <td>{item.userId}</td>
              <td>{item.id}</td>
              <td>{item.title}</td>
              <td>{item.body}</td>
            </tr>
          )

        })}</tbody>
      </table>

    </div>
  )
}

Source for localeCompare: link

edited Jan 28, 2018 at 23:59

answered Jan 28, 2018 at 23:51

salman.zare

6495 silver badges8 bronze badges

1 Comment

vinny Over a year ago

ourcodeworld.com/articles/read/764/…. This worked for me.

Collectives™ on Stack Overflow

How to sort JSON data in ReactJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related