Arrange Data Alphabetically using a JavaScript Loop

Question

Arrange Data Alphabetically using a JavaScript Loop

I have a unique program that extracts data from 2 different URLs. Using CSS, I automatically generate a sleek Business Card design in a 'for' loop. Now, I'm faced with the challenge of creating a Sort Alphabetical button based on "${users[count].name}" and frankly, I'm stumped on how to tackle this.

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>                      
            `

Following that, there are some EventListeners involved, but I don't believe they are relevant to my current dilemma. The main issue at hand is figuring out how to organize and store all the printed data in an Array so that I can implement a sorting mechanism. One idea that crossed my mind is utilizing a 'for' loop from 0 to 10 to display them based on ascending order or another criteria.

javascript arrays json sorting

Answer 1

Answer №1

Organize your code by breaking it down into functions.

var array_photos;
var array_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]) => {
  array_photos = photos; 
  array_users = users;
  display_output(array_photos, array_users)
})


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

function display_output() {
  photos = array_photos
  users = array_users;

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

<button onclick="sort_data(); display_output()">Sort</button>
<div id="names"></div>

Answer 2

Organize your code by breaking it down into functions.

var array_photos;
var array_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]) => {
  array_photos = photos; 
  array_users = users;
  display_output(array_photos, array_users)
})


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

function display_output() {
  photos = array_photos
  users = array_users;

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

<button onclick="sort_data(); display_output()">Sort</button>
<div id="names"></div>

Answer 3

Answer №2

To properly manage your responses, it is recommended to save them in an array and then apply manipulations to organize the information.

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)}))
  })
 
  displayAlbums()
})


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
  })
  
  displayAlbums()
})

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

<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>

Answer 4

To properly manage your responses, it is recommended to save them in an array and then apply manipulations to organize the information.

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)}))
  })
 
  displayAlbums()
})


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
  })
  
  displayAlbums()
})

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

<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>

Answer 5

Answer №3

    document.getElementById("sort").addEventListener('change', event => {
        let clonedArray = [...originalArray];
        if (event.target.value == 'ascending') {
            let sortByAsc = clonedArray.sort((a, b) => a.title.localeCompare(b.title));
            filteredData = sortByAsc;
            fetchData();
        } else if (event.target.value == 'descending') {
            let sortByDesc = clonedArray.sort((a, b) => b.title.localeCompare(a.title));
            filteredData = sortByDesc;
            fetchData();
        } else {
            fetchData();
        }
    })

Answer 6

    document.getElementById("sort").addEventListener('change', event => {
        let clonedArray = [...originalArray];
        if (event.target.value == 'ascending') {
            let sortByAsc = clonedArray.sort((a, b) => a.title.localeCompare(b.title));
            filteredData = sortByAsc;
            fetchData();
        } else if (event.target.value == 'descending') {
            let sortByDesc = clonedArray.sort((a, b) => b.title.localeCompare(a.title));
            filteredData = sortByDesc;
            fetchData();
        } else {
            fetchData();
        }
    })

Arrange Data Alphabetically using a JavaScript Loop

Answer №1

Answer №2

Answer №3

Similar questions

Discovering the properties in an object using a variable name in JavaScript

Animating pseudo-elements using Jquery

Retrieving additional links on a webpage by making JSON requests using Python

JQuery Mobile fails to apply consistent styling to user input check items within a list

Are there any alternatives to PHP for implementing an auto-complete search feature?

The problem with Vue JS static links

Eliminate the listener if the connected function contains a binding

Enhancing Material UI icons with a sleek linear gradient

Learn how to find and filter elements in arrays that do not include a particular value using React

How can I adjust the animation speed for ChartJS graphics?

``What is the process for retrieving an object array that has been stored in a session using

The ios browser environment is unable to retrieve the value during vuejs development

PHP unset() having issues with selective removal

Having trouble with jQuery Animate when trying to change the background-color property?

The React forwardRef Higher Order Component is failing to provide a reference to the container element

Trigger a JavaScript function on a body click, specifically targeting certain elements to be excluded

Place an image at the center with a height set to 100% within a div that has a fixed height and

The error message "ECONNRESET" occurred while attempting to send a post request using Axios to

Step-by-step guide for adding an icon to the corner of a Material UI button

Utilizing various filters with JQ