灰尘js循环遍历json中的对象答案

【问题标题】：dust js looping through objects in json灰尘js循环遍历json中的对象
【发布时间】：2017-12-06 15:59:49
【问题描述】：

我在使用dust.js 循环json 时遇到问题，这是我的json

{
   "Undergraduate":{
      "metaid":"0770",
      "Offcampus":{
         "FeesItems":{
            "tuition":{
               "label":"Tuition Fees",
               "value":"5,870"
            },
            "comprehensive":{
               "label":"Comprehensive Fees",
               "value":"2,141"
            },
            "studentActivity":{
               "label":"Student Activity Fees",
               "value":"190"
            },
            "academicExcellence":{
               "label":"Academic Excellence Fee",
               "value":"225"
            },
            "room":{
               "label":"Room",
               "value":"0"
            },
            "board":{
               "label":"Board",
               "value":"0"
            },
            "livingAllowance":{
               "label":"Living Allowance",
               "value":"9,738"
            }
         }
      } 
   }
}

我想遍历 FeesItems 对象中的项目..

{#Undergradaute.Offcampus.FeesItems}
  {label}, {value}{~n}   <!-- What should be given in this line? -->
{/Undergradaute.Offcampus.FeesItems}

【问题讨论】：

标签： javascript json dust.js

【解决方案1】：

只要 FeesItems 是数组 FeesItems= []，这将遍历 FeesItems 渲染 label 和 value 中的项目@

http://akdubya.github.io/dustjs/#guide

{
   "Undergraduate":{
      "metaid":"0770",
      "Offcampus":{
         "FeesItems":[{
               "label":"Tuition Fees",
               "value":"5,870"
            },
            {
               "label":"Comprehensive Fees",
               "value":"2,141"
            },
            ...
]
         }
      } 
   }
}

这是防尘指南的示例：

{#friends}
  {name}, {age}{~n}
{/friends}

{
  friends: [
    { name: "Moe", age: 37 },
    { name: "Larry", age: 39 },
    { name: "Curly", age: 35 }
  ]
}

更新 1：

由于您不希望更改原始 JSON，因此您需要从原始 JSON 生成一个新对象，类似于

var newModel =  Object.keys(obj.Undergraduate.Offcampus.FeesItems).map(function(prop){ return obj.Undergraduate.Offcampus.FeesItems[prop] });

请注意，如果尝试类似以下操作，javascript 将保留对对象的引用：

originalObj.Undergraduate.Offcampus.FeesItems.board.label = "Costa Rica"
console.log(newModel[5].label);

【讨论】：

我无法修改实际的 json，有没有办法不以任何方式改变 json？如果不使用dust.js，是否有任何其他模板js，如小胡子、车把？
@NarendranSankaran 我更新了帖子，为您的问题提供了一个可行的解决方案。希望对你有帮助
有没有办法通过key关键字引用对象键？这是我的问题stackoverflow.com/questions/29554132/…

【解决方案2】：

您可以使用帮助程序迭代对象。

例如，您可以定义一个这样的助手：

dust.helpers.iter = function(chunk, context, bodies, params) {
  var obj = dust.helpers.tap(params.obj, chunk, context);

  var iterable = [];

  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var value = obj[key];

      iterable.push({
        '$key': key,
        '$value': value,
        '$type': typeof value
      });
    }
  }

  return chunk.section(iterable, context, bodies);
};

然后，在您的模板中，您将像这样循环：

{@iter obj=Undergradaute.Offcampus.FeesItems}
  {$value.label}, {$value.value}{~n}
{/iter}

【讨论】：