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 stackoverflow.com/questions/1129216/… — Gilang Pratama
– Gilang Pratama, Commented Mar 3, 2021 at 8:55
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Roberto Zvjerković
– Roberto Zvjerković, Commented Mar 3, 2021 at 8:57

Jack Dunleavy · Accepted Answer · 2021-03-03 16:30:37Z

2

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>
  );
}

edited Mar 3, 2021 at 16:30

answered Mar 3, 2021 at 8:55

Jack Dunleavy

2871 silver badge7 bronze badges

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

Comments

Bzx naga · Accepted Answer · 2021-03-03 09:09:08Z

1

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

answered Mar 3, 2021 at 9:09

Bzx naga

1694 silver badges13 bronze badges

Comments

Ati · Accepted Answer · 2021-03-03 12:30:11Z

1

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>
  );
}

answered Mar 3, 2021 at 12:30

Ati

3044 silver badges16 bronze badges

Collectives™ on Stack Overflow

JSON from URL to sorted array ReactJS

3 Answers 3

Edits:

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edits:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related