How to take larger amount of each product and show within a list from the largest to the smallest?

Question

How do I pick up quantities and show all the smallest amounts of that amount within ul (list) of different objects?

As for example, the first item has 5 quantity, I would like to show within a list the amount dimuindo (5, 4, 3, 2, 1, 0), as well for each item of the array as in the html example below.

Could someone help me ?

Ex:

Json

"items": [
{
"description": "Smartphone Motorola",
"id": "123",
"quantity": 5
},
{
"description": "Smartphone Samsung",
"id": "456",
"quantity": 3
}

HTML

<p>Smartphone Motorola</p>
<ul class="dropdown-menu">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<p>Smartphone Samsung</p>
<ul class="dropdown-menu">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 1

I believe that "Quantity" should be an Array with the numbers you want, for example:

"quantity": [1, 2, 3, 4, 5]

In your case:

"items": [
{
"description": "Smartphone Motorola",
"id": "123",
"quantity": [1, 2, 3, 4, 5]
}

And from that you can use the for to create your list from 1 to 5 automatically.

Answer 2

Achieves the expected result using loops for. In the example below, I use 2 instructions for chained, in the first go I go through the array of objects that contains the data picking the value of the property quantity and on top of these values I do another by filling the list in HTML:

let items = [
  {
     "description": "Smartphone Motorola",
     "id": "123",
     "quantity": 5
  },
  {
     "description": "Smartphone Samsung",
     "id": "456",
     "quantity": 3
  }  
];

let ul = document.getElementsByTagName('ul');

for(let i=0; i<items.length; i++) {             // percorro o array de dados
  for(let j=0; j<items[i].quantity +1; j++) {   // percorro as quantidades 
    let li = document.createElement('li');      // crio as tags li's dinamicamente
    li.innerHTML = j;                           // as preencho com os valores
    ul[i].appendChild(li);                      // adiciono as li's nas ul's
  }
}

<p>Smartphone Motorola</p>
<ul class="dropdown-menu"></ul>

<p>Smartphone Samsung</p>
<ul class="dropdown-menu"></ul>

Answer 3

First you need to extract the amounts from the Object that has the items. See that it is an array (items: [ ... ]), so you can interact with the elements using for or foreach, but it is simpler using array functions in javascript, as map, that interacts over each element of an array, and we can resume only the amount that is what matters, and then order using sort, which is another method of an array, see the example:

var lista = {
    "items": [{
            "description": "Smartphone Motorola",
            "id": "123",
            "quantity": 5
        },
        {
            "description": "Smartphone Samsung",
            "id": "456",
            "quantity": 3
        },
        {
            "description": "Smartphone Samsung",
            "id": "678",
            "quantity": 7
        }
    ]
};

let qtde = lista.items
   .map(item => item.quantity);

qtde.sort();

console.log(qtde);

Note that in this case the order was ascending. To make a descending order, we must pass to the method sort one Function whether you will receive two values. This Function must return a value less than zero if the first value is greater, zero if they are equal and a value greater than zero if the second is greater.

So we can simply subtract the second from the first, as we want to order downwards:

var lista = {
    "items": [{
            "description": "Smartphone Motorola",
            "id": "123",
            "quantity": 5
        },
        {
            "description": "Smartphone Samsung",
            "id": "456",
            "quantity": 3
        },
        {
            "description": "Smartphone Samsung",
            "id": "678",
            "quantity": 7
        }
    ]
};

let qtde = lista.items
   .map(item => item.quantity);

qtde.sort(function(n1, n2) {
  return n2 - n1;
});

console.log(qtde);

Now just take this list and add each value to an element UL. We could do this with functions like join, but to make it simpler to understand, I will use the foreach:

var lista = {
    "items": [{
            "description": "Smartphone Motorola",
            "id": "123",
            "quantity": 5
        },
        {
            "description": "Smartphone Samsung",
            "id": "456",
            "quantity": 3
        },
        {
            "description": "Smartphone Samsung",
            "id": "678",
            "quantity": 7
        }
    ]
};

let qtde = lista.items
   .map(item => item.quantity);

qtde.sort(function(n1, n2) {
  return n2 - n1;
});


// variável que tem a lista UL
let ul = document.getElementById("lista");

for (var i = 0; i < qtde.length; i++) {
        // criar um elemento LI
        var li = document.createElement('li');
        // adicionar o valor no LI
        li.appendChild(document.createTextNode(qtde[i]));
        // adicionar o LI na lista UL
        ul.appendChild(li);
}

<p>Smartphone Motorola</p>
<ul id="lista" class="dropdown-menu"></ul>

There are other ways to do this, but it is demonstrated how to extract the values, sort and add to the list, in different parts.