Display objects inside a jquery table

Question

To add an object to a table, in the example below the item has an array of 2 objects. How to inform these two objects within the table?

let myjson ={
       "pedidoId": 1,
       "itens": [
          {
             "sku": "123",
             "nome": "produto 1",
             "quantidade": 1
          },
          {
             "sku": "1234",
             "nome": "produto 2",
             "quantidade": 2
          }
       ]
    }



let btn = document.querySelector("#search")
let list = document.querySelector("#list")

btn.addEventListener("click", () => {
     console.log(myjson.itens.nome)
      let tb = document.createElement("tbody")
      
      tb.innerHTML = `<tr><th   scope="row">${myjson.pedidoId}</th>
<td>${myjson.itens.nome}</td>
<td>${myjson.itens.sku}</td>
<td>${myjson.itens.quantidade}</td>
</tr>`
      list.appendChild(tb);

 })

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

    <table class="table table-striped" id="list">
        <thead>
          <tr>
            <th scope="col">N° Pedido</th>
            <th scope="col">Item</th>
            <th scope="col">SKU</th>
            <th scope="col">Quantidade</th>
          </tr>
        </thead>
      
      </table>
      <div class="col-auto my-1">
        <button type="submit" class="btn btn-primary" id="search">Procurar</button>
        <button type="submit" class="btn btn-primary" id="print" onclick="window.print();">imprimir</button>
      </div>
    </div>

Answer 1

Since "items" is an array, you need to pass the index of the item you want to appear.

Using the myjson that you created for example, it is necessary to concatenate the name, sku and quantity strings, so that all the information of all the items is integer in a row. To do this we’ll make one for to concatenate the strings.

Then just add the strings already concatenated to table.

btn.addEventListener("click", () => {
   let tb = document.createElement("tbody")
   
   // SKU
   var strSku = '<td>'
   for (item in myjson.itens) {
      strSku += `${myjson.itens[item].sku}, `
   }
   strSku = strSku.substr(0, strSku.length - 2)
   strSku += '</td>'

   // Nome
   var strNome = '<td>'
   for (item in myjson.itens) {
      strNome += `${myjson.itens[item].nome}, `
   }
   strNome = strNome.substr(0, strNome.length - 2)
   strNome += '</td>'

   // Quantidade
   var strQnt = '<td>'
   for (item in myjson.itens) {
      strQnt += `${myjson.itens[item].quantidade}, `
   }
   strQnt = strQnt.substr(0, strQnt.length - 2)
   strQnt += '</td>'

   tb.innerHTML += `<tr><th   scope="row">${myjson.pedidoId}</th>
      ${strNome}
      ${strSku}
      ${strQnt}
      </tr>`

   list.appendChild(tb);
})

The problem is that adding more requests, this code will not work. To solve this I took the liberty of changing yours myjson example and add an order, it got like this:

let myjson = {
   "pedidos": [
       {
           "pedidoId": 1,
           "itens": [
               {
                   "sku": "123",
                   "nome": "produto 1",
                   "quantidade": 1
               },
               {
                   "sku": "1234",
                   "nome": "produto 2",
                   "quantidade": 2
               }
           ]
       },
       {
          "pedidoId": 2,
          "itens": [
             {
                "sku": "321",
                "nome": "produto 3",
                "quantidade": 3
             },
             {
                "sku": "4321",
                "nome": "produto 4",
                "quantidade": 4
             }
          ]
       }
   ]
}

The difference will be going through the new array of requests, but logic keeps the same.

btn.addEventListener("click", () => {
   let tb = document.createElement("tbody")
   
   for (pedido in myjson.pedidos){

       // SKU
       var strSku = '<td>'
       for (item in myjson.pedidos[pedido].itens) {
           strSku += `${myjson.pedidos[pedido].itens[item].sku}, `
       }
       strSku = strSku.substr(0, strSku.length - 2)
       strSku += '</td>'
   
       // Nome
       var strNome = '<td>'
       for (item in myjson.pedidos[pedido].itens) {
           strNome += `${myjson.pedidos[pedido].itens[item].nome}, `
       }
       strNome = strNome.substr(0, strNome.length - 2)
       strNome += '</td>'
   
       // Quantidade
       var strQnt = '<td>'
       for (item in myjson.pedidos[pedido].itens) {
           strQnt += `${myjson.pedidos[pedido].itens[item].quantidade}, `
       }
       strQnt = strQnt.substr(0, strQnt.length - 2)
       strQnt += '</td>'
   
       tb.innerHTML += `<tr><th   scope="row">${myjson.pedidos[pedido].pedidoId}</th>
           ${strNome}
           ${strSku}
           ${strQnt}
           </tr>`
   
       list.appendChild(tb);
   }
})