如何在 EJS 上循环 object 的属性？

Question

I am creating sort of an api app with node.js, express, body-parser, ejs, fs. I have the server running and everything else working. The problems is that have an object(JSON file) that is parsed, but I can't get access to certain attributes when using my index.ejs template:

{
 "x":{
    "color": "black"
    "total": 1
     },
 "y":{
    "color": "red"
    "total": 5
     }
}

My javascrip file has the following function that loops trough the file.

var keys = Object.keys(Obj);      
for (var i = 0; i< keys.length; i++){
 var k = keys[i];
 var colorKey = Obj[k].color;
 var totalKey = Obj[k].total;   
 }
var db = keys;
res.render("index", {
  db: db
}

Then on my index.ejs I have the code that works with the first attribute ("x" and "y") but can't access the rest.

Welcome to the main page!

<% for (var i = 0; i < db.length; i++) { %> ////This is the for loop that shows "x" and "y"

<h1> We have the variable: <%= db[i] %> </h1>
<h1> The color is: <%= db[i].color  %></h1>
<h1> There is <%= db[i].total  %> left!</h1>

<% } %>

The page shows both variables 's but shows nothing when it comes to color and total. Is there a way to loop those in ejs?

Answer 1

I presume you don't actually need the preprocessing. Instead, you can do can make an array of keys

db = /* the source object */
const keys = Object.keys(db)

res.render("index", { db })

<% for (let i = 0; i < keys.length; i++) { %>

<h1> We have the variable: <%= keys[i] %> </h1>
<h1> The color is: <%= db[keys[i]].color  %></h1>
<h1> There is <%= db[keys[i]].total  %> left!</h1>

<% } %>