Convert Josn data to html table

Question

I'm using jsreport and i want to convert json data to html table but i couldnt manage to do it. This my data :

    {
"items": [
    {
        "order": "65854",
        "addr": "test 1",
        "city": "2fc2",
        "country": "2fc2"
    },
    {
        "order": "75757",
        "addr": "azerty",
        "city": "2fc2",
        "country": "2fc2"
    },
    {
        "order": "65575784",
        "addr": "tst",
        "city": "2fc2",
        "country": "2fc2"
    }
]
}

And this is my code :

<h1>Test</h1>
       
<table class='table striped'>
    <thead>
        <tr>
            <th>OrderID</th>
            <th>ShipAddress</th>
            <th>ShipCity</th>
            <th>ShipCountry</th>
        </tr>
    </thead>
    <tbody>
        {{#each row}}
        <tr>
            <td>{{order}}</td>
            <td>{{addr}}</td>
            <td>{{city}}</td>
            <td>{{country}}</td>
        </tr>
        {{/each}}
    </tbody>
</table>

<script>

for (let i=0; i<items.length; i++) {
   let row = items[i]
}
</script>

i think the problem is in {{#each row}} {{/each}} and its not getting any thing.

Answer 1

It makes a lot of difference what the error message says. (Like, if it tells you a certain variable doesn't exist, you know you need to declare that variable in the scope where the error message was provided.) You'll get used to making use of error messages to debug your code.

For now, here's a working demo (using vanilla JS) that does something very similar to what you're trying to do. Two issues resolved here are:

• You may not be getting the items property (an Array) from your JSON object before you try to loop through it (maybe shown in your first error message)
• You use var to declare a for-loop counter, a classic trap

const
  inputObject = { "items": [ {id: 1}, {id: 2}, {id: 3} ] },
  items = inputObject.items, // Gets the `items` array
  TRs = document.querySelector("tbody").children; // (For demo)

for (let i = 0; i < items.length; i++) { // Uses `let`, not `var`
  const
    row = items[i],
    TD = TRs[i].children[0]; // Gets first td in table row
  TD.textContent = row.id;
}

<table class='table striped'>
    <thead>
        <tr> <th>OrderID</th> </tr>
    </thead>
    <tbody>
        <tr><td></td></tr>
        <tr><td></td></tr>
        <tr><td></td></tr>
    </tbody>
</table>