javascript - 从键值对中获取 json 值，而不需要传递 meteor 中的键

Question

我正在使用键从 meteor 中的 json 中获取值。我的json就是这种格式。

    {
"_id" : "SXTJBs7QLXoyMFGpK",
"Brand" : {
    "value" : "Nike"
},
"Material" : {
    "value" : "Cooton"
},
"Price" : {
    "value" : "67484"
},
"ComboId" : {
    "value" : "y23"
},
"Color" : {
    "value" : "White"
},
"LaunchDate" : {
    "value" : "08/02/2015"
},
"DiscountActiveDate" : {
    "value" : "08/03/2015"
},
"DiscountInactiveDate" : {
    "value" : "08/04/2015"
},
"Category" : {
    "value" : "Sport"
},
"ProductSubCategory" : {
    "value" : "trackpant"
},
"Status" : "Pending",
"TemplateID" : {
    "value" : "557fc7d06ecb48d38a67a380"
  }

所以对于值我使用这样的键。

    <tbody>
            {{#each product}}

            <tr>
                <td>{{this.Brand.value}}</td>
                <td>{{this.Material.value}}</td>
                <td>{{this.Price.value}}</td>
                <td>{{this.ComboId.value}}</td>
                <td>{{this.Color.value}}</td>
                <td>{{this.LaunchDate.value}}</td>
                <td>{{this.DiscountActiveDate.value}}</td>
                <td>{{this.DiscountInactiveDate.value}}</td>
                <td>{{this.Category.value}}</td>
                <td>{{this.ProductSubCategory.value}}</td>
            </tr>

            {{/each}}
        </tbody>

我正在得到结果。但问题是json没有固定格式。有时它会包含较少的值，有时会包含较多的值。我不想在 HTML 中对键进行硬编码。还有其他方法可以得到这个吗？我不想硬编码诸如 {{this.Material.value}}、{{this.Price.value}} 等值。

Answer 1

JS

Template.test.helpers({

  itemsArray: function(){

    // This would normally be the result of your Mongo query

    var itemsArray = [
      {
        "_id": "SXTJBs7QLXoyMFGpK",
        "Brand": "Nike",
        "Material": "Cooton",
        "Price": "67484",
        "ComboId": "y23",
        "Color": "White",
        "LaunchDate": "08/02/2015",
        "DiscountActiveDate": "08/03/2015",
        "DiscountInactiveDate": "08/04/2015",
        "Category": "Sport",
        "ProductSubCategory": "trackpant",
        "Status": "Pending",
        "TemplateID": "557fc7d06ecb48d38a67a380"
      }, {
        "_id": "IGJHihljiUYG6787y",
        "Brand": "Adidas",
        "Material": "Polyamide",
        "Color": "Silver",
        "Status": "Pending",
        "TemplateID": "557fc7d06ecb48d38a67a380"
      }
    ];

    // specify the order you want things to be displayed

    var displayOrder = [
      "_id",
      "Brand",
      "Material",
      "Price",
      "ComboId",
      "Color",
      "LaunchDate",
      "DiscountActiveDate",
      "DiscountInactiveDate",
      "Category",
      "ProductSubCategory",
      "Status",
      "TemplateID"
    ];

    // You want to end up create an array like this and 
    // sending it to a template helper

    // var thingsToDisplay = [
    //   [
    //     "SXTJBs7QLXoyMFGpK",
    //     "Nike",
    //     "Cooton",
    //     "67484"
    //     "y23",
    //     "White",
    //     "08/02/2015",
    //     "08/03/2015",
    //     "08/04/2015",
    //     "Sport",
    //     "trackpant",
    //     "Pending",
    //     "557fc7d06ecb48d38a67a380"
    //   ],[
    //     "IGJHihljiUYG6787y",
    //     "Adidas",
    //     "Polyamide",
    //     "",
    //     "",
    //     "",
    //     "",
    //     "",
    //     "",
    //     "",
    //     "",
    //     "Pending",
    //     "557fc7d06ecb48d38a67a380"
    //   ]
    // ];

    // thingsToDisplay will have the same length as itemsArray

    // initialize thingsToDisplay
    var thingsToDisplay = [];

    for(var j = 0; j < itemsArray.length; j++){

      thingsToDisplay[j] = [];

      for(var i = 0; i < displayOrder.length; i++){

        if( itemsArray[j][ displayOrder[i] ] ){
          thingsToDisplay[j][i] = itemsArray[j][ displayOrder[i] ];
        } else {
          thingsToDisplay[j][i] = "";
        };

      };

    };

    console.log("The finalized thingsToDisplay array: ", thingsToDisplay);
    return thingsToDisplay;

  }

});

你可以用这个避免所有的 for 循环

var thingsToDisplay = [];

for (var i = itemsArray.length - 1; i >= 0; i--) {

  var singleItem = displayOrder.map(function(keyName){
    return itemsArray[i][keyName];
  });

  thingsToDisplay.push(singleItem);

};

return thingsToDisplay;

HTML

<template name="test">

    <h1>I used Bootstrap 3</h1>

    <table class="table">
        <thead>
          <tr>
            <th>_id</th>
            <th>Brand</th> 
            <th>Material</th>
            <th>Price</th>
            <th>ComboId</th>
            <th>Color</th> 
            <th>LaunchDate</th>
            <th>DiscountActiveDate</th>
            <th>DiscountInactiveDate</th> 
            <th>Category</th>
            <th>ProductSubCategory</th>
            <th>Status</th> 
            <th>TemplateID</th>
          </tr>
        </thead>
        <tbody>
          {{#each itemsArray}}
          <tr>
            {{#each this}}
                <td>{{this}}</td>
            {{/each}}
          </tr>
          {{/each}}
        </tbody>
    </table>

</template>