CODEWITHSUNDEEP
node.jsunderscore.jslodash
Ken
Ken

Reputation: 3141

How to iterate through objects within array in Lodash

I'm trying to use lodash within an HTML template for an email in Node.js. I have one array with several objects. I would like to iterate through each object and list all of the repeating values. When I use the code below, I receive an error stating that the value is undefined (e.g., ReferenceError: firstName is not defined). The HTML template is in a separate file.

Any thoughts on what I'm doing wrong?

Javascript:

var template = fs.readFileSync('server/views/email-template.html').toString();
var htmlAll = _.template(template)(orderInfo);

HTML:

<% _.forEach(function(firstName) { %><%- firstName %></td><% }); %> <% _.forEach(function(lastName) { %><%- lastName %></td><% }); %>
<% _.forEach(function(address) { %><%- address %></td><% });%>
<% _.forEach(function(city) { %><%- city %><% }); %>, <% _.forEach(function(state.code) { %><%- state.code %><% });
%> <% _.forEach(function(zip) { %><%- zip %><% }); %>

<% _.forEach(function(item) { %><td><%- item %></td><% }); %>
<% _.forEach(function(cost) { %><td><%- cost %></td><% }); %>

Array:

[
  {
    "firstName": "John",
    "lastName": "Doe",
    "address": "123 Broadway",
    "city": "New York",
    "state": {
      "code": "NY",
      "state": "New York"
    },
    "zip": "10001",
  },

  {
    "color": "White",
    "size": "M",   
    "item": "T-Shirt",
    "cost": 19.99,
  },
  {
    "color": "Blue",
    "size": "L",   
    "item": "T-Shirt",
    "cost": 19.99,
  }
]

Upvotes: 18

Views: 45753

Answers (3)

John Meyer
John Meyer

Reputation: 2356

You can also do this in ES6 arrow function style:

const users = ['Jack', 'Jill']; _.forEach(users, user => {console.log(user);});

Upvotes: 2

Haseeb Asif
Haseeb Asif

Reputation: 1786

There are couple of things wrong here actually. Starting with template syntax, you are only specifying the iterator to foreach in your template but we need data and iterator both something as follows 

_.forEach(users, function(user){

Also you have multiple objects in single array position so I have update the json structure a little bit as well.

After minor updates template something like this with some property missing intentionally,

var tmpl = _.template('<ul><% _.forEach(users, function(user) { %><li><%- user.firstName %></li><li><%- user.address %></li><li><%- user.state.code %></li><li><%- user.state.state %></li><ol> <% _.forEach(user.orders, function(order) { %> <li><span><%- order.item %><span> cost is: <span><%- order.cost %><span></li> <% }); %> </ol> <% }); %></ul>');

and json with orders arrays in same object is as follows

var data = { 'users': 

        [
  {
    "firstName": "John",
    "lastName": "Doe",
    "address": "123 Broadway",
    "city": "New York",
    "state": {
      "code": "NY",
      "state": "New York"
    },
    "zip": "10001",
    "orders": [
        {
            "color": "White",
            "size": "M",   
            "item": "T-Shirt",
            "cost": 19.99,
        },
        {
            "color": "Blue",
            "size": "L",   
            "item": "Pant",
            "cost": 19.99,
        }
  ]  
  } 
]
};

You can see it working on here at JSBIN

Upvotes: 18

Magus
Magus

Reputation: 15104

It's because you give orderInfo[0] to your template. And in your array, orderInfo[0] is just this part :

{
    "firstName": "John",
    "lastName": "Doe",
    "address": "123 Broadway",
    "city": "New York",
    "state": {
      "code": "NY",
      "state": "New York"
    },
    "zip": "10001",
}

So the template can't iterate on the missing values.

Upvotes: 1

Related Questions