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.
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:
items property (an Array) from your JSON object before you try to loop through it (maybe shown in your first error message)var to declare a for-loop counter, a classic trapconst
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>