Home / Questions / 456908
Accepted
Pedro
Asked: 2022-06-03 08:35:55 +0800 CST 2022-06-03 08:35:55 +0800 CST

Print array extraction result in html

  • 772

let objDos = {
    Dental: [
      {
          HORA: "8:30",
          ESPECIALISTA: "ANDREA ZUÑIGA",
          PACIENTE: "MARCELA RETAMAL",
          RUT: "11123425-6",
          PREVISION: "ISAPRE"
      },
      {
          HORA: "11:00",
          ESPECIALISTA: "MARIA PIA ZAÑARTU",
          PACIENTE: "ANGEL MUÑOZ",
          RUT: "9878789-2",
          PREVISION: "ISAPRE"
      },
      {
          HORA: "11:30",
          ESPECIALISTA: "SCARLETT WITTING",
          PACIENTE: "MARIO KAST",
          RUT: "7998789-5",
          PREVISION: "FONASA"
      },
      {
          HORA: "13:00",
          ESPECIALISTA: "FRANCISCO VON TEUBER",
          PACIENTE: "KARIN FERNANDEZ",
          RUT: "18887662-K",
          PREVISION: "FONASA"
      },
      {
          HORA: "13:30",
          ESPECIALISTA: "EDUARDO VIÑUELA",
          PACIENTE: "HUGO SANCHEZ",
          RUT: "17665461-4",
          PREVISION: "FONASA"
      },
      {
          HORA: "14:00",
          ESPECIALISTA: "RAQUEL VILLASECA",
          PACIENTE: "ANA SEPULVEDA",
          RUT: "14441281-0",
          PREVISION: "ISAPRE"
      }
    ]
    }
    
let array = objDos.Dental;
for(item of array){
   let paragraph = []
   for(let value in item){
       paragraph.push(item[value]);
   }
   document.write(`<p class="parrdental">${paragraph.join(" - ")}</p>`);
}
    
    
let consultas = []
let clientes = objDos.Dental;
for(item of clientes){
   consultas.push(item.PACIENTE);
}
console.log(consultas)
        
document.getElementById("consultantes").innerHTML=consultas;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dental</title>
</head>
<body>
    <div id="consultantes">yyy</div>
    <script src="arreglo-2.js"></script>
</body>
</html>

In these files when using

 document.getElementById("consultantes").innerHTML=consultas;

It doesn't render the innerHTML instruction in the browser, so I don't know what could be causing this situation, because I use the id attribute in the html block, I do the same thing in javascript. While this works with console.log , it doesn't do the same thing when I try to output the statement to html. The idea is to extract selected information from the array, and take it to the web archive or web page to present it. Tried giving the div a width using css , but no response.

javascript

1 Answers

  1. Best Answer

    let's go by parts

    1)In the following variables:

    let array = objDos.Dental;
let clientes = objDos.Dental;

    You store the same list Dentalof the object objDos, you could reduce it to just one variable:

    let clientes = objDos.Dental;
    1. When you iterate with the first for:

    for(item of array){
   let paragraph = []
   for(let value in item){
       paragraph.push(item[value]);
   }
   document.write(`<p class="parrdental">${paragraph.join(" - ")}</p>`);
}

    You do a document.write()which rewrites the content inside the tags <body></body>(except for the tag <script></script>) and the following line disappears from the body :

    <div id="consultantes">yyy</div>

    So if you want the latter to fortake effect on the id="consultantes", you can remove the former forand do a few tweaks to make it look more "tidy":

    let clientes = objDos.Dental;
for(item of clientes){
   let text = `<p>${item.HORA}, ${item.ESPECIALISTA}, ${item.PACIENTE}</p>`
   document.getElementById("consultantes").innerHTML+=text;
}

    Note: I just added those three item elements, but you may as well add whatever you want~

    • 0