Primeiro você precisa extrair as quantidades do object que tem os itens. Veja que ele é um array (items: [ ... ]
), por isso pode interar nos elementos usando for
ou foreach
, mas é mais simples usando funções de array em javascript
, como map
, que intera sobre cada elemento de um array, e podemos retonar só a quantidade que é o que interessa, e em seguida order usando sort
, que é outro método de uma array, veja o exemplo:
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 que nesse caso a ordem foi crescente. Para fazer uma ordem decrescente, devemos passar para o método sort
um function quer irá receber dois valores. Essa function deve retornar um valor menor que zero caso o primeiro valor for maior, zero caso sejam iguais e um valor maior que zero caso o segundo seja maior.
Então podemos simplesmente subtrair o segundo do primeiro, como queremos ordenar de forma decrescente:
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);
Agora basta pegar essa lista e adicionar cada valor a um elemento UL
. Poderíamos fazer isso com funções como join
, mas para ficar mais simples de entender, vou usar o 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>
Existem outras formas de fazer isso, mas assim fica demonstrado como extrair os valores, ordenar e adicionar à lista, em partes distintas.