Loop JSON in EJS

Question

I have codes in EJS below,

<table>
<% for(var i=0; i < data.length; i++) { %>
<tr>
 <td><%= data[i].id %></td>
 <td><%= data[i].name %></td>
 </tr>
 <% } %>
</table>

My data is like this:

[{"id":1,"name":"bob",description:[{"name":"carol","url":"www.hp.com"},{"name":"katy","url":"www.desktop.com"}]},{"id":2,"name":"john"description:[{"name":"raya","url":"www.usus.com"},{"name":"fat","url":"www.mia.com"}]}]"

I can manipulate the row to populate the table in JS => id and name but i cannot do that to description: name , url

This will output the following table (using the example data from above):

<table>
 <tr>
<td>1</td>
<td>bob</td>
<td>name</td>
<td>url</td>
</tr>
<tr>
<td>2</td>
<td>john</td>
</tr>
<tr>
<td>3</td>
<td>jake</td>
<td>name</td>
<td>url</td>
</tr>
</table>

Helps appreciated.

Regards

Answer 1

This is because the "description" is an array. So you can use a nested loop to access its data:

<table>
<% for(var i=0; i < data.length; i++) { %>
<tr>
 <td><%= data[i].id %></td>
 <td><%= data[i].name %></td>
 <td><% for(var j=0; j < data[i].description.length; j++) { %>
     <p><a href="<%=data[i].description[j].url%>"><%=data[i].description[j].name%></a></p>
 <% } %></td>
 </tr>
<% } %>
</table>