JSON object data to html table

Question

I'm trying my best to loop through JSON data that I get from API and display it in the html table. I parsed the original JSON and displayed data accesing it's elements like this:

JSON(the data is from api):

{"PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20402","Likutis_PP":0,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40},{"PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20406","Likutis_PP":11,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40}

The whole json is decalred as "content" so:

 let jsn=JSON.parse(content);

     document.getElementById("Prekes_Kodas").innerText="Kodas: "+jsn.Kodas;
                                
     document.getElementById("Prekes_Barkodas").innerText="Barkodas: "+jsn.KAPKodas;

And till this point everything wokrs fine. But I'm facing a problem that if JSON type is object and I loop through it and access it's elements or even get the length. Any suggestions?

Function(data is the parsed JSON):

    function warehouseQuant(data){
                let table = document.getElementById("myTable");
    
                for (let i = 0; i < data.length; i++ ){
                    let row = `<tr>
                                    <td>${data[i].Kodas}</td>
<td>${data[i].Kaina}</td>
<td>${data[i].Likutis}</td>
                                </tr>`
                                table.innerHTML += row 
                }
                }

If I understand correctly, jsn/data sometimes is an array, and sometimes an object? If so, a quick fix could be to put if(!data.length)data=[data] at the beginning of your procedure — Me.Name
– Me.Name, Commented Aug 20, 2021 at 7:18

Ouroborus · Accepted Answer · 2021-08-23 08:31:23Z

4

Assemble all the rows and insert it as one monolithic chunk of html.

Your data doesn't have the outer brackets, but I'm assuming it's an array of objects. (If it's originally provided as you present it, it's not valid JSON.)

const data = [{"PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20402","Likutis_PP":0,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40},{"PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20406","Likutis_PP":11,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40}];

const warehouseQuant = data =>
  document.getElementById("myTable").innerHTML = data.map(
    item => ([
      '<tr>',
      ['Kodas','Kaina','Likutis'].map(
        key => `<td>${item[key]}</td>`
      ),
      '</tr>'
    ])
  ).flat(Infinity).join('');
  
warehouseQuant(data);

<table id="myTable"></table>

edited Aug 23, 2021 at 8:31

answered Aug 20, 2021 at 7:56

Ouroborus

17k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Karim Ali Over a year ago

Hey do you mind explaining (['<tr>', ['Kodas','Kaina','Likutis'].map(key => <td>${item[key]}</td>),'</tr>']) ?

Ouroborus Over a year ago

@KarimAli Comments aren't a good place to answer questions. You might be better off asking a new question. But, what about it would you like explained?

Karim Ali Over a year ago

@Ourborus, just needed to understand the statement (['<tr>', ['Kodas','Kaina','Likutis'].map(key => <td>${item[key]}</td>),'</tr>']) in the map function. I think I got it. It is clear, I misunderstood with a comma operator in javascript. Txs.

Collectives™ on Stack Overflow

JSON object data to html table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related