Sort function not working as expected after putting getElementById this way

Question

I'm a beginner figuring out my own first project but I can't get info about this case.

The application is supposed to receive data about a product, it's name, price, stock, number of sales and then sort them from the most sold to the less sold.

Here's the thing, I was trying to shorten how verbose the code was by putting this chunk this other way

so I went from this

var balanceVenta = (ev) => {
  ev.preventDefault();

  diseños.sort((a, b) => {
    return (a.amountSold < b.amountSold) ? 1 : -1
  });

  document.getElementById("name1").innerHTML = diseños[0].designName;
  document.getElementById("stock1").innerHTML = diseños[0].currentStock;
  document.getElementById("price1").innerHTML = "$" + diseños[0].priceEa;
  document.getElementById("sold1").innerHTML = diseños[0].amountSold;
  document.getElementById("lastProduction1").innerHTML = diseños[0].productionAmount;

  document.getElementById("name2").innerHTML = diseños[1].designName;
  document.getElementById("stock2").innerHTML = diseños[1].currentStock;
  document.getElementById("price2").innerHTML = "$" + diseños[1].priceEa;
  document.getElementById("sold2").innerHTML = diseños[1].amountSold;
  document.getElementById("lastProduction2").innerHTML = diseños[1].productionAmount;

  document.getElementById("name3").innerHTML = diseños[2].designName;
  document.getElementById("stock3").innerHTML = diseños[2].currentStock;
  document.getElementById("price3").innerHTML = "$" + diseños[2].priceEa;
  document.getElementById("sold3").innerHTML = diseños[2].amountSold;
  document.getElementById("lastProduction3").innerHTML = diseños[2].productionAmount;

}

to this

var index = 0;

var balanceVenta = (ev) => {
  ev.preventDefault();

  diseños.sort((a, b) => {
    return (a.amountSold > b.amountSold) ? 1 : -1
  });


  index++;
  var prefixName = "name";
  var prefixStock = "stock";
  var prefixPrice = "price";
  var prefixSold = "sold";
  var prefixLastProd = "lastProduction";

  document.getElementById(prefixName + index).innerHTML = diseños[index - 1].designName;
  document.getElementById(prefixStock + index).innerHTML = diseños[index - 1].currentStock;
  document.getElementById(prefixPrice + index).innerHTML = diseños[index - 1].priceEa;
  document.getElementById(prefixSold + index).innerHTML = diseños[index - 1].amountSold;
  document.getElementById(prefixLastProd + index).innerHTML = diseños[index - 1].productionAmount;

}

Everything works fine except for the sort function, which was working fine in the first hardcoded version but not working at all in the second one.

Pd: "diseños" is an Array which holds an object ("diseño" with no s) inside each index through this function

let diseños = [];
const addDesign = (ev) => {
    ev.preventDefault();
    let diseño = {
      designName: document.getElementById("textBox1").value,
      currentStock: document.getElementById("textBox2").value,
      productionAmount: document.getElementById("textBox3").value,
      priceEa: document.getElementById("textBox4").value,
      amountSold: document.getElementById("textBox5").value

    }
    diseños.push(diseño);
    document.forms[0].reset();

Can you guys help me out figure this one out?

Answer 1

You were close; you just need to put the code in a loop over diseños. I also simplified the sort logic a little, assuming amountSold is a number. Swap the position of a.amountSold and b.amountSold to change ascending to descending.

var balanceVenta = (ev) => {
  ev.preventDefault();

  diseños.sort((a, b) => a.amountSold - b.amountSold);

  var prefixName = "name";
  var prefixStock = "stock";
  var prefixPrice = "price";
  var prefixSold = "sold";
  var prefixLastProd = "lastProduction";

  for (var index = 0; index < diseños.length; index++) {
    var suffix = index + 1;
    document.getElementById(prefixName + suffix).innerHTML = diseños[index].designName;
    document.getElementById(prefixStock + suffix).innerHTML = diseños[index].currentStock;
    document.getElementById(prefixPrice + suffix).innerHTML = diseños[index].priceEa;
    document.getElementById(prefixSold + suffix).innerHTML = diseños[index].amountSold;
    document.getElementById(prefixLastProd + suffix).innerHTML = diseños[index].productionAmount;
  }

}