How to transform the result of a querySelectorAll into an array?

Asked

Viewed 137 times

-3

I’m already getting the html values, but I have no idea how I’m going to turn the result into an array. Can someone help me?

<!DOCTYPE html>
<html>
<body>
<div id="data">
  <div id="dados">
  <p>joão da silva</p>
  <p>entregador</p>
  <p>8:00</p>
  <p>17:00</p>
  <p>0</p>
  <p>nenhum</p>
  <p>nenhuma</p>
  <p>nenhuma</p>
  </div>
  <div id="dados">
  <p>maria da silva</p>
  <p>entregadora</p>
  <p>8:00</p>
  <p>17:00</p>
  <p>0</p>
  <p>nenhum</p>
  <p>nenhuma</p>
  <p>reclamação</p>
  </div>
  <div id="dados">
  <p>paulo da silva</p>
  <p>entregador</p>
  <p>8:00</p>
  <p>17:00</p>
  <p>0</p>
  <p>nenhum</p>
  <p>nenhuma</p>
  <p>reclamação</p>
  </div>
</div>



<button onclick="myFunction()">Enviar</button>



<script>
function myFunction() {
var x = document.getElementById("data").querySelectorAll("p"); 
for(var i=0;i<x.length;i++)
{
document.write(x[i].innerHTML+"<br>");
}
}
</script>

The array I want to generate with the result.

var funcionarios = {

"dados": [

   {
  
  "nome": joão da silva,
  "funcao": entregador,
 
  "horarios": 
  {
    "entrada": 8:00,
    "saida": 16:00,
    "faltas": 0
  },
   
  "historico": 
  [
    {
      "atraso": nenhum,
      "entregas_erradas": nenhuma,
      "reclamacao": henhuma
    }
  ],

},
{
  
  "nome": maria da silva,
  "funcao": entregadora,
 
  "horarios": 
  {
    "entrada": 8:00,
    "saida": 16:00,
    "faltas": 0
  },

  "historico": 
  [
    {
      "atraso": nenhum,
      "entregas_erradas": nenhuma,
      "reclamacao": henhuma
    }
  ],

},
{
  
  "nome": paulo da silva,
  "funcao": entregadora,
 
  "horarios": 
  {
    "entrada": 8:00,
    "saida": 16:00,
    "faltas": 0
  },
   
  "historico": 
  [
    {
      "atraso": nenhum,
      "entregas_erradas": nenhuma,
      "reclamacao": henhuma
    }
  ],

  },

  ],
  "area": "entrega",
  "avaliacao": {
  "status": "otimo",
  }
};
javascript

  • You have access to the server code that generates this HTML?

  • Another question: if history is an array you can give example of HTML with multiple history entries?

1 answer

0


Your HTML has a primary error, you cannot define a same id for more than 1 element, in which case you should use class, I made a solution to your example in the code below:

<div id="resultado"></div>
<div id="data">
  <div class="dados">
  <p>joão da silva</p>
  <p>entregador</p>
  <p>8:00</p>
  <p>17:00</p>
  <p>0</p>
  <p>nenhum</p>
  <p>nenhuma</p>
  <p>nenhuma</p>
  </div>
  <div class="dados">
  <p>maria da silva</p>
  <p>entregadora</p>
  <p>8:00</p>
  <p>17:00</p>
  <p>0</p>
  <p>nenhum</p>
  <p>nenhuma</p>
  <p>reclamação</p>
  </div>
  <div class="dados">
  <p>paulo da silva</p>
  <p>entregador</p>
  <p>8:00</p>
  <p>17:00</p>
  <p>0</p>
  <p>nenhum</p>
  <p>nenhuma</p>
  <p>reclamação</p>
  </div>
</div>



<button onclick="myFunction()">Enviar</button>



<script>
  const dados = []
function myFunction() {
  document.querySelectorAll('.dados').forEach(dado => {
    const p = dado .querySelectorAll('p')
    const item = {
      nome: p[0].innerText,
      funcao: p[1].innerText,
      horarios: {
        entrada: p[2].innerText,
        saida: p[3].innerText,
        faltas: p[4].innerText
      },
      historico: [
        {
          "atraso": p[5].innerText,
          "entregas_erradas": p[6].innerText,
          "reclamacao": p[7].innerText
        }
      ]
    }
    dados.push(item)
  })
  document.querySelector('#resultado').innerText = JSON.stringify(dados)
}
</script>

  • thanks for the reply, Jason.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.