Loop through JSON in EJS

Question

I have codes in EJS below,

<script>
    var row =<%-JSON.stringify(data)%>
    console.log(row);
</script>
<% for(var i=0; i<JSON.stringify(data).length; i++) {%>
   <tr>
     <td>
       <%= JSON.stringify(data)[i].id%>
     </td>
   </tr>
<% } %>

output of row is correct, an array of 3 objects, each with properties id, name etc.. I can manipulate the row to popuate the table in JS. However, I am wonderring whether there is a way to allow it be done in the above manner?

When I run the code above, JSON.stringify(data).length is not 3, but rather the length of the whole string.

Another questions is when I try to add

<% alert('t'); %> or <% window.alert('t'); %>, it gives me 'not defined' error...

Helps appreciated.

Regards Hammer

Kolomna

Inside your for loop you can just reference data since it is being manipulated on the server (i.e. you want to manipulate it as a real object, not as a string). Regarding your second question, alert and window are browser-specific and aren't n node. – Barling

Thanks Barry. is it possible in EJS, I defined a function or var in <script> and referenced in <% %>? – Kolomna

Answer 1

JSON.stringify returns a String. So, for example:

var data = [
    { id: 1, name: "bob" },
    { id: 2, name: "john" },
    { id: 3, name: "jake" },
];

JSON.stringify(data)

will return the equivalent of:

"[{\"id\":1,\"name\":\"bob\"},{\"id\":2,\"name\":\"john\"},{\"id\":3,\"name\":\"jake\"}]"

as a String value.

So when you have

<% for(var i=0; i<JSON.stringify(data).length; i++) {%>

what that ends up looking like is:

<% for(var i=0; i<"[{\"id\":1,\"name\":\"bob\"},{\"id\":2,\"name\":\"john\"},{\"id\":3,\"name\":\"jake\"}]".length; i++) {%>

which is probably not what you want. What you probably do want is something like this:

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

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

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

Hippocrene

Hello ! This is correct. but how to do same thing with html rendered page not with ejs?? – Netherlands

@SPnL That's not possible. With EJS you can use JS code before the render thing happens. – Geminian

Answer 2

in my case, datas is an objects of Array for more information please Click Here

<% for(let [index,data] of datas.entries() || []){  %>
 Index : <%=index%>
 Data : <%=data%>
<%} %>

Christa

Please add some explanation to your answer such that others can learn from it – Milestone

Thank You for your comment. I have edit the code please go through it. – Christa

Answer 3

JSON.stringify(data).length return string length not Object length, you can use Object.keys.

<% for(var i=0; i < Object.keys(data).length ; i++) {%>

https://mcmap.net/q/99594/-get-size-of-json-object

Ioyal

Answer 4

My way of creating dynamic options on a select is :

<optgroup label="Select Table">
    <% for(var i=0; i<doctors.length; i++) {%>
        <% fullname = doctors[i].surname + doctors[i].name %>
        <option name="doctor" value=" <%= fullname%> "><%= fullname%></option>
    <% } %>
</optgroup>

I have sent the data from the response and i just iterate it with a for loop.

Galer

Answer 5

Something of this sort you may try. Not necessary you need to use Dbjson, just refer for syntax

const codifyOptions = codifier.DatabaseCodifyOptions
const databaseOptions = databasifier.SqlServerDatabaseOptions
const dbJson = databasifier.getDatabaseJson(project, codifyOptions, databaseOptions)

dbJson.tables.forEach(table => {

  const tableName = codifier.codifyText(
        table.domain ? table.domain.concat("_", table.name) : table.name,
        codifyOptions 
  
  )

Vair