Problem with loop adding all values of an array at a time

Question

Ok so i needed to sort each object using their 'tipo' as parameter. 'urgente' should always be printed first on my screen then 'prioritario'. The solution i came up with was to simply separate em into two arrays then print each array at a time on my screen. THe only problem is that everytime i time to append an array inside my

it appens all the values at a time

ok so heres my html:

let tasks = [
    {
      titulo: "Comprar comida para o gato",
      tipo: "Urgente"
    },
    {
      titulo: "Limpar o quarto",
      tipo: "urgente"
    },  
    {
      titulo: "Consertar Computador",
      tipo: "prioritário"
    },  
    {
      titulo: "Guardar dinheiro do lanche",
      tipo: "Urgente"
    },  
    {
      titulo: "Beber água",
      tipo: "prioritário"
    },    
    {
        titulo: "Alongamento",
        tipo: "prioritário"
      }, 
  ]



  let prioritário = []
  let urgente = []

  for (i = 0; i < tasks.length; i++) {
    if (tasks[i].tipo == "prioritário") {
        prioritário.push(tasks[i].titulo)
    } else {
        urgente.push(tasks[i].titulo)
    }
}


let li = document.createElement('li')
let ul = document.querySelector('ul')

for (i = 0; i < prioritário.length; i++) {
    li.append(prioritário[i])
    ul.appendChild(li)
    
}

<ul>
    <li>ok</li>

    <li>ok</li>
    <li>ok</li>
    <li>ok</li>
    <li>ok</li>
    <li>ok</li>
    <li>ok</li>


</ul>

Ok so i was expecing three differnet

on my scrren but somehow it is printing everything together like this

Can you guys please explain to me why this is happening and how to solve it

I don't want to store values as paraphs

Just a tip: write your code in English, even the comments! It will be easier for everybody else. So, instead of let prioritário = [], do let priorities = [], etc. — Gerardo Furtado
– Gerardo Furtado, Commented Nov 10, 2022 at 3:06
Regarding your problem, you have to append the li as a child of ul: stackoverflow.com/q/20673959/5768908 — Gerardo Furtado
– Gerardo Furtado, Commented Nov 10, 2022 at 3:09

Stacks Queue · Accepted Answer · 2022-11-10 03:22:46Z

first, put your let li = document.createElement("li"); inside your loop so it will create whole new element.

second, you cannot li.append(prioritário[i]). appending is for the html element. Thus, make it

let li = document.createElement("li");
li.innerHTML = prioritário[i];
ul.appendChild(li);

let tasks = [
      {
        titulo: "Comprar comida para o gato",
        tipo: "Urgente",
      },
      {
        titulo: "Limpar o quarto",
        tipo: "urgente",
      },
      {
        titulo: "Consertar Computador",
        tipo: "prioritário",
      },
      {
        titulo: "Guardar dinheiro do lanche",
        tipo: "Urgente",
      },
      {
        titulo: "Beber água",
        tipo: "prioritário",
      },
      {
        titulo: "Alongamento",
        tipo: "prioritário",
      },
    ];

    let prioritário = [];
    let urgente = [];

    for (i = 0; i < tasks.length; i++) {
      if (tasks[i].tipo == "prioritário") {
        prioritário.push(tasks[i].titulo);
      } else {
        urgente.push(tasks[i].titulo);
      }
    }

    let ul = document.querySelector("ul");

    for (let i = 0; i < prioritário.length; i++) {
      let li = document.createElement("li");
      li.innerHTML = prioritário[i];
      ul.appendChild(li);
    }

<ul>
  <li>ok</li>

  <li>ok</li>
  <li>ok</li>
  <li>ok</li>
  <li>ok</li>
  <li>ok</li>
  <li>ok</li>
</ul>

Collectives™ on Stack Overflow

Problem with loop adding all values of an array at a time

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related