-2

Como faço para pegar as quantidades e mostrar todos os menores dessa quantidade dentro de ul (lista) de objetos diferentes?

Como por exemplo, o primeiro item têm 5 de quantidade, gostaria de mostrar dentro de uma lista a quantidade dimunuindo (5, 4, 3, 2, 1, 0), assim para cada item do array como no exemplo do html abaixo.

Alguém poderia me ajudar ?

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>

3 Respostas 3

1

Creio que o "quantity" deveria ser um Array com os números que você deseja, por exemplo:

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

No seu caso:

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

E a partir disso você pode usar o for para criar a sua lista de 1 até 5 automaticamente.

1

Consegue o resultado esperado utilizando loops for. No exemplo abaixo, utilizo 2 instruções for encadeadas, no primeiro for eu percorro o array de objetos que contém os dados pegando o valor da propriedade quantity e em cima desses valores faço outro for preenchendo a lista no 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>

1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .