How can i fetch data from a json file and render them in an ascending order? For example let´s say i have this json file

[{
  "id": 0,
  "name": "Vernon Dunham",
  "company": "Qualcore",
  "email": "[email protected]"
}, {
  "id": 1,
  "name": "Dori Neal",
  "company": "Sunopia",
  "email": "[email protected]"
}, {
  "id": 2,
  "name": "Rico Muldoon",
  "company": "Airconix",
  "email": "[email protected]"
} 

and i want to render the data with only Id and name in ascending order. I tried coding it in different ways but since i am still a beginner i can´t really figure it out. Thank you so much

CodePudding user response：

You can use .map and .sort:

const data = [{
  "id": 0,
  "name": "Vernon Dunham",
  "company": "Qualcore",
  "email": "[email protected]"
}, {
  "id": 1,
  "name": "Dori Neal",
  "company": "Sunopia",
  "email": "[email protected]"
}, {
  "id": 2,
  "name": "Rico Muldoon",
  "company": "Airconix",
  "email": "[email protected]"
}]

const sorted = data.map(d => ({id: d.id, name: d.name})).sort((el1, el2) => el1.id - el2.id)

console.log(sorted)

Once you set the new sorted and mapped array to a state variable, you can map over it to render.

Example

//Functional Component:
const Example = ({data}) => {
  const [sortedData, setSortedData] = useState([])

  useEffect(() => {
     if(data) setSortedData(data
          .map(d => ({id: d.id, name: d.name}))
          .sort((el1, el2) => el1.id - el2.id)))
  }, [data])


  return(
    sortedData?.map(element => <div key={element.id}> {element.name} </div>)
   )
}

CodePudding user response：

You can short your array data using the .sort method.

App.js

import React, { useState, useEffect } from "react";
import Data from "./data.json";

function App() {
  const [data, setData] = useState();

  const sortDataByField = (array, field) => {
    return array.sort((a, b) =>
      a[field].toString().localeCompare(b[field].toString())
    );
  };

  useEffect(() => {
    const sortData = sortDataByField(Data, "name");
    setData(sortData);
  }, []);

  return (
    <div className="App">
      {data?.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default App;

data.json

[{
    "id": 0,
    "name": "Vernon Dunham",
    "company": "Qualcore",
    "email": "[email protected]"
  }, {
    "id": 1,
    "name": "Dori Neal",
    "company": "Sunopia",
    "email": "[email protected]"
  }, {
    "id": 2,
    "name": "Rico Muldoon",
    "company": "Airconix",
    "email": "[email protected]"
  }]

CodePudding user response：

Import and set up a useState hook

import React, {usesState} from 'react'
const [companies, setCompanies] = useState([])

fetch the data

const data = fetch('/api/v1/companies', {method: 'GET'})

sort first to order, then map to only get id and name

const sorted = data.sort((a, b)=>{return a.name > b.name ? 1 : -1})
                   .map(({id, name}) => {return {id, name}})
/* this return only id and name sorted by name
*
* if you wanna sort by id, do this:
* .sort((a, b) => a.id - b.id)
*/

When you done sorting and mapping, store it to that useState hook so that you can render it:

setCompanies(sorted)

Then render it, also prevent errors by checking if you state has data before rendering:

companies &&
companies.map(({id, name}) => <h1 key={id}>{name}</h1>)

// or

companies
 ? companies.map(({id, name}) => <h1 key={id}>{name}</h1>)
 : <p>No data</p>

All code

import React, {usesState, useEffect} from 'react'

export default App = () =>{ 
const [companies, setCompanies] = useState([])

useEffect(()=>{
 fetchData()
}, [])

const fetchData = async () => {
 try{
  const data = fetch('/api/v1/companies', {method: 'GET'})
  if(data){
   const sorted = data.sort((a, b)=>{return a.name > b.name ? 1 : -1})
                      .map(({id, name}) => {return {id, name}})
   setCompanies(sorted)
  }
  else{
   console.log('No data')
  }
 }
 catch (err){
  console.log(err)
 }
}

return(
 <div>
  companies &&
  companies.map(({id, name}) => <h1 key={id}>{name}</h1>) 
 </div>
)
}