How to sort data getting from an endpoint in javascript using react?

Question

I want to sort the items according to their Id like in ascending so how to do it?

heres the code from react component i used...

import { useState, useEffect} from "react"
//styles
import './ItemList.css'

export default function ItemList() {

const[Items,setItems]=useState([])


useEffect(() => {

    fetch('http://localhost:3000/data')
    .then(response=>response.json())
    .then(json=>setItems(json))
   
}, [])


console.log(Items)

return (
    <div className="item-list">
        <h1>Item List</h1>
        <ul>
            {Items.map(data=>(

            <li key={data.id}>
            <h2>{data.id}</h2>
            <h3>{data.name}</h3>
            </li>

            ))}
        </ul>
        
    </div>
)
}

The best method is to include pagination and sort in API itself. if you need it in UI then(json=>setItems(json.sort(....//your sort condition))) — Sojin Antony
– Sojin Antony, Commented Dec 15, 2021 at 6:23
Agreed. Ideally that would be done on the server, but if it has to be front-end the answer below will work — LovingGarlic
– LovingGarlic, Commented Dec 15, 2021 at 6:30

Rahul Sharma · Accepted Answer · 2021-12-15 06:26:48Z

2

Pagination might create problems if you sort on the front end.

use array sort for frontend, I'm assuming id is number

fetch("http://localhost:3000/data")
  .then((response) => response.json())
  .then((json) => setItems(json.sort((a, b) => a.id - b.id)));

If it's a string

fetch("http://localhost:3000/data")
  .then((response) => response.json())
  .then((json) => setItems(json.sort()));

edited Dec 15, 2021 at 6:26

answered Dec 15, 2021 at 6:23

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

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

2 Comments

jsejcksn Over a year ago

Note: This is assuming item.id is type number. (I think it probably is, too.)

Rahul Sharma Over a year ago

Yes, that's correct.

Collectives™ on Stack Overflow

How to sort data getting from an endpoint in javascript using 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