JSON from URL to sorted array ReactJS

Question

I have an URL where some data is stored, like

[
   {"id":1,"first_name":"add","last_name":"add"},
   {"id":2,"first_name":"sfdf","last_name":"aad"}
]

etc. I want to sort it by last name and display already sorted array in React functional component. How can I achieve this?

UPD. I have a problem with transforming data from url to an accessible js array, not with sort it

this is how I fetched data from URL

function App() {
  const [contacts, setContacts] = useState([]);

  const fetchContactsList = async() => {
    try {
      let response = await fetch(URL)
      let contacts = await response.json()
      setContacts(contacts)
    } catch (error) {
      console.log(error)
    }
  }
  useEffect(() => {
    fetchContactsList()
  }, [])


  return (
    <main>
      <Container>
        <Header />
        <Search />
        <ContactsList contacts={contacts} />
      </Container>
    </main>
  );
}

may you can follow this https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value — Gilang Pratama, Mar 03 '21 at 08:55
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort — Roberto Zvjerković, Mar 03 '21 at 08:57

Jack Dunleavy · Answer 1 · 2021-03-03T16:30:37.380

Edits:

Edited answer to better reflect OPs clarification in the question
Updated sort function to use localeCompare

I think what you're looking for is something like this:


function App() {
  const [contacts, setContacts] = useState([]);

  const fetchContactsList = async() => {
    try {
      let response = await fetch(URL)
      let contacts = await response.json()
      setContacts(contacts)
    } catch (error) {
      console.log(error)
    }
  }
  useEffect(() => {
    fetchContactsList()
  }, [])

  const sortedContacts = useMemo(() => {
    if (!contacts) return;

    return contacts.sort((a,b) => a.last_name.localeCompare(b.last_name));
  }, [contacts]);

  return (
    <main>
      <Container>
        <Header />
        <Search />
        <ContactsList contacts={sortedContacts} />
      </Container>
    </main>
  );
}

score 1 · Answer 2 · answered Mar 03 '21 at 09:09

U can just use .sort()

function sorting(){
    var array = [{last_name:'z'},{last_name:'s'}]

    var array2 = ['a','s','d']

    return array.sort(dynamicSort("last_name"));
}

function dynamicSort(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }
    return function (a,b) {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;
    }
}
 
console.log (sorting())

enjoy

score 1 · Answer 3 · answered Mar 03 '21 at 12:30

This single line was an answer

contacts.sort( (a,b) => a.last_name.localeCompare(b.last_name))


  function App() {
  const [contacts, setContacts] = useState([]);

  const fetchContactsList = async() => {
    try {
      let response = await fetch(URL)
      let contacts = await response.json()
      contacts.sort( (a,b) => a.last_name.localeCompare(b.last_name))
      setContacts(contacts)
    } catch (error) {
      console.log(error)
    }
  }
  useEffect(() => {
    fetchContactsList()
  }, [])


  return (
    <main>
      <Container>
        <Header />
        <Search />
        <ContactsList contacts={contacts} />
      </Container>
    </main>
  );
}

JSON from URL to sorted array ReactJS

3 Answers3

Edits: