web-dev-qa-db-ja.com

Lodashの配列内のオブジェクトを反復処理する方法

Node.jsの電子メールのHTMLテンプレート内でlodashを使用しようとしています。複数のオブジェクトを持つ1つの配列があります。各オブジェクトを反復処理し、すべての繰り返し値をリストしたいと思います。以下のコードを使用すると、値が未定義であることを示すエラーが表示されます（例：ReferenceError: firstName is not defined）。 HTMLテンプレートは別のファイルにあります。

私が間違っていることについて何か考えはありますか？

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><% }); %>

アレイ：

[
  {
    "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,
  }
]
node.jsunderscore.jslodash
14
Ken

実際には、いくつか間違っていることがあります。テンプレート構文から始めて、テンプレートでforeachするイテレータを指定するだけですが、データとイテレータの両方が必要です。

_.forEach(users, function(user){

また、単一の配列位置に複数のオブジェクトがあるため、json構造も少し更新しました。

一部のプロパティが意図的に欠落しているこのようなテンプレートをマイナーアップデートした後、

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>');

同じオブジェクト内のorders配列を持つjsonは次のとおりです

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,
        }
  ]  
  } 
]
};

ここで [〜＃〜] jsbin [〜＃〜] で動作していることがわかります

14
Haseeb Asif

テンプレートにorderInfo[0]を指定したからです。そして、あなたの配列では、orderInfo[0]はこの部分にすぎません：

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

そのため、テンプレートは欠損値を反復処理できません。

1
Magus

ES6矢印関数スタイルでこれを行うこともできます。

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

0
John Meyer