Sort Alphabetically JS Loop with Fetched Data

Question

i have a program that gets data from 2 fetched URLs, with CSS I automatically create a Business Card type design and it does that automatically in a 'for' loop. Now I need to create a Sort Alphabetical button by that "${users[count].name} and I do not have any idea how to do that.

Promise.all([
    fetch('https://jsonplaceholder.typicode.com/photos'),
    fetch('https://jsonplaceholder.typicode.com/users')
]).then(function (responses) {
    return Promise.all(responses.map(function (response) {
        return response.json();
    }));
}).then(([ photos , users]) =>{
    var names = document.getElementById('names')
    for (let count = 0; count < 10; count++){
        names.innerHTML+=`
        <div class= "profile_card">
        <div class=topCont>
            <img class="thumbnail" src="${photos[count].thumbnailUrl}">
           
            <div class="personal">
            
                        <h2 class="name">${users[count].name}</h5>
... etc
</div>   </div>                      
            `

After this i have some EventListeners but I do not this they matter. The idea is that i need to be able to sort these data that I print but I do not know how to store all of them in an Array and after that I thought about using a 'for' loop from 0 to 10 to output them by the number that resulted to be the lowest or something like that.

See [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value?rq=1). — jarmod, Aug 01 '22 at 12:18
You will need to redo the templating when that button is clicked, so that loop probably needs to go into a function. And your arrays need to be stored within that function's scope. — soupy-norman, Aug 01 '22 at 12:22
@ITgoldman ok, i understand that and I've tried that. But how do I change my code to be able to print them that way. I have written a code with a function compare but how do I do it to be able to have the arranged in that way — Urus221, Aug 01 '22 at 12:24

score 0 · Answer 1 · answered Aug 01 '22 at 12:29

Split your logic into functions.

var arr_photos;
var arr_users;

Promise.all([
  fetch('https://jsonplaceholder.typicode.com/photos'),
  fetch('https://jsonplaceholder.typicode.com/users')
]).then(function(responses) {
  return Promise.all(responses.map(function(response) {
    return response.json();
  }));
}).then(([photos, users]) => {
  arr_photos = photos; 
  arr_users = users;
  do_output(arr_photos, arr_users)
})


function do_sort() {
  arr_users.sort(function(a, b) {
    if (a.name > b.name) {
      return 1;
    }
    if (a.name < b.name) {
      return -1;
    }
    return 0
  })
}

function do_output() {
  photos = arr_photos
  users = arr_users;

  var names = document.getElementById('names')
  names.innerHTML = '';
  for (let count = 0; count < 10; count++) {
    names.innerHTML += `<div class="profile_card">
        <div class="topCont">
            <img class="thumbnail" src="${photos[count].thumbnailUrl}">
            <div class="personal">
            <h2 class="name">${users[count].name}</h2>
        </div>   </div>   </div>`
  }
}

<button onclick="do_sort(); do_output()">sort</button>
<div id="names"></div>

Omg man, thank you so so much. It works perfectly. I created another function like the do_sort one for the Z-A Order and everything works fine. What I wanted to ask you is if i create another button with the onclick function do_output(); why won't it revert it back to default. In the console i get some result but it does not change the printed results. — Urus221, Aug 01 '22 at 13:44

score 0 · Answer 2 · answered Aug 01 '22 at 12:40

You should store your responses into array and then manipulate them to sort the data.

const loadDataButton = document.getElementById('loadDataButton')
const sortByUserName = document.getElementById('sortByUserName')
const sortByAlbumName = document.getElementById('sortByAlbumName')

let users = []
let albums = []

loadDataButton.addEventListener('click', async () => {
  await fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(data => users = data)
  
  await fetch('https://jsonplaceholder.typicode.com/albums')
  .then(res => res.json())
  .then(data => {
    albums = data.map(x => ({...x, user: users.find(user => user.id === x.userId)}))
  })
 
  showAlbums()
})


function showAlbums(){
  const app = document.getElementById('app')
  
  app.innerHTML = '' //clear
  
  albums.forEach(album => {
    const p = document.createElement('p')
    p.innerHTML = `${album.title} - ${album.user.name}`
    app.appendChild(p)
  }) 
}


sortByUserName.addEventListener('click', () => {
  albums.sort((a, b) => {
    if(a.user.name > b.user.name) return 1
    else return -1
  })
  
  showAlbums()
})

sortByAlbumName.addEventListener('click', () => {
  albums.sort((a, b) => {
    if(a.title > b.title) return 1
    else return -1
  })
  
  showAlbums()
})

<button id="loadDataButton">Load data</button>

<button id="sortByUserName">Sort by user name</button>
<button id="sortByAlbumName">Sort by album name</button>

<div id="app"></div>

Sort Alphabetically JS Loop with Fetched Data

2 Answers2