sorting array of images by value in ascending order

Question

cardShop is a div with children -> (images with different ID's and values) every card value looks like this 2000,500 or this 1500,200 I want to sort the images by value in ascending order by the first number in the array. The function is called by the blue button in the right corner.

Here is what I have done so far.

HTML DOC




    
    Document

JavaScript file

function sorting() {
    let deck = [].slice.call(document.getElementById("cardShop").children)
    for (let i = 2; i < deck.length; i++) {
        let elementValue = deck[i].getAttribute('value').split(",").map(Number);
    }
}

user_6729397 · Answer

const sorting = () => {
    const images = document.getElementsByTagName('img');
    const deck = [].slice.call(images);
    const container = document.getElementById('cardShop');

    const deckSorted = deck.sort((a, b) => {
       const aToSort = a.getAttribute('value').split(',')[0];
       const bToSort = b.getAttribute('value').split(',')[0];
       return aToSort - bToSort;
    });
    
    for(let i = 0; i < deck.length; i++) {
      deck[i].parentNode.removeChild(deck[i]);
      container.append(deckSorted[i]);
    }    
}


        Sort

You can do it using sort and after that just remove the old element and append the new element, like this.

user_4784140 · Answer

You are on the right track,I finished the code for you. The code pushes all the images to an array with json elements that contains the element and the value (the left one). It then sorts them in the right order, removes all the images and inserts them again in the correct order.

Working example: https://playcode.io/537993

function sorting() {


let deck = [].slice.call(document.getElementById("cardShop").children)
let images = []
let button = document.getElementById('toSort');

for (let i = 1; i < deck.length; i++) {
    let elementValue = deck[i].getAttribute('value').split(",").map(Number);
    // add all values to a array with json info about the element
    images.push({
      'element': deck[i],
      'value': elementValue[0]
    });
}

// sort them on the value
images.sort((a, b) => {
  return a.value - b.value;
})

// remove all elements in the div
document.getElementById('cardShop').innerHTML = '';

// add the button again
document.getElementById('cardShop').appendChild(button);
  // Add the images again
  images.forEach(image => {
    document.getElementById('cardShop').appendChild(image.element)
  })
}

user_6364399 · Answer

const setup = () => {
 const toSort = document.querySelector('#toSort');
  toSort.addEventListener('click', sorting);

};

const sorting = () => {
 let cardShop = document.querySelector('#cardShop');
  
  let dek = [...cardShop.querySelectorAll('img')]
   .sort((a,b) => {
     let valuesA = a.getAttribute('value').split(',');
      let valuesB = b.getAttribute('value').split(',');
     let comparer = valuesA[0].localeCompare(valuesB[0]);
      if(comparer === 0)
       comparer = valuesA[1].localeCompare(valuesB[1]);
      return comparer;
    })
    .map(node=>cardShop.appendChild(node));
};


//load
window.addEventListener('load', setup);

#toSort{
  background-color: #3b5998;
  width:50px;
  height:50px;
  float:right;
}

user_1777688 · Answer

Your HTML markup was broken. Make sure you refactor it to instead of , because no Javascript will be able to handle it.

function sorting () {
   const imgWrapper = document.getElementById('cardShop')
   const deck = [].slice.call(imgWrapper.getElementsByTagName('img'))
   deck.sort((currentImage, nextImage) => {
      const currentImageValue = parseInt(currentImage.getAttribute('value').split(',')[0])
      const nextImageValue = parseInt(nextImage.getAttribute('value').split(',')[0])
      return currentImageValue - nextImageValue
   })
   // at this point the array has been sorted, but not the actual HTML!
   console.log(deck)
   // optional - if you want to redraw them with the new order in the HTML
   const oldImgHTMLCollection = [].slice.call(imgWrapper.getElementsByTagName('img'))
   oldImgHTMLCollection.forEach(oldImg => imgWrapper.removeChild(oldImg))
   deck.forEach(newImg => imgWrapper.appendChild(newImg))
}

sorting()





  
  Document

sorting array of images by value in ascending order

4 Answers