Javascript sort fetched data

Question

I am making this menu page, using wordpress as back end. So I fetched the elements, put them to template and appended them to a parent, but now I need to figure out how to sort menu items alphabetically. I don't know if I should write new function after fetching and appending or make sorting a part of the function series that fetches and appends data.

This is what I used:

const template = document.querySelector("#menutemplate").content;
const newSection = document.createElement("section");
const parent = document.querySelector("main");

function getMenu() {
    fetch("MY LINK GOES HERE")
        .then(res => res.json())
        .then(showMenu)
}

function showMenu(menuItems) {
    //console.log(menuItems)
    menuItems.forEach(showItem)
}

function showItem(item) {
    //console.log(item)
    const clone = template.cloneNode(true);
    clone.querySelector(".product").textContent=item.title.rendered
    clone.querySelector(".price").textContent=item.acf.volunteer_price + " dkk";
    newSection.appendChild(clone);
    parent.appendChild(newSection);
}

getMenu();

You can mark an answer as accepted using the green tick box. Don't edit your title to say the answer was found. — Dan
– Dan, Commented Nov 25, 2018 at 13:29

Dan · Accepted Answer · 2018-11-24 19:28:55Z

2

You could use Array.prototype.sort?

function showMenu(menuItems) {
  menuItems
    .sort(a, b) => a.title.localeCompare(b.title))
    .forEach(showItem)
}

answered Nov 24, 2018 at 19:28

Dan

10.6k2 gold badges41 silver badges68 bronze badges

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

Comments

Jacek Lipiec · Accepted Answer · 2018-11-24 19:58:48Z

0

Your components should have their data prepared & ready to serve; that means that you should sort the data before it's given to showMenu, after you get result from API call.

For instance, given that you have:

const menuItems = [
  {label: "Label 1", url: "Url 1"},
  {label: "Label 2", url: "Url 2"},
]

you should sort it here...

function getMenu(){
  fetch("MY LINK GOES HERE")
    .then(res => res.json())
    .then(items => items.sort(sortMenuItems)) // <---- Sort goes here
    .then(showMenu)
}

with function

function sortMenuItems(a, b) {
  const labelA = a.label.toUpperCase(); // ignore upper and lowercase
  const labelB = b.label.toUpperCase(); // ignore upper and lowercase

  if (labelA < labelB ) {
    return -1;
  } else if (labelA > labelB ) {
    return 1;
  } else {
     // labels must be equal
     return 0;
  }
}

edited Nov 24, 2018 at 19:58

answered Nov 24, 2018 at 19:36

Jacek Lipiec

4323 silver badges10 bronze badges

2 Comments

Dan Over a year ago

"Your components should have their data prepared & ready to serve; that means that you should sort the data before it's given to showMenu" I disagree with this - sorting is a UI concern and should be done within the UI layer :X

Jacek Lipiec Over a year ago

@DanPantry of course, that's why I suggested to sort the data after the api call and before displaying, so we are still in a presentation layer. I'll expand first sentence to clarify :)

Agnut. · Accepted Answer · 2018-11-24 23:52:55Z

0

After trying out several solutions and not finding how to make javascript sort, I chose different approach to this and fetched already sorted data by adding "&order=asc&orderby=title" to the link I used to fetch data! Saddly I lost a lot of time by not realising this earlier. :))

answered Nov 24, 2018 at 23:52

Agnut.

157 bronze badges

Collectives™ on Stack Overflow

Javascript sort fetched data

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related