從鍵值對獲取json值而不傳遞流星中的密鑰

Question

我正在使用鍵從流星中獲取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> 

Answer 2

類似下面應該是有幫助的：

Template.NAME.helpers({ 
    headers:function(){ 
    // assumption : parsed JSON is in this.json 
    var json = this.json; 

    // get all keys from object json 
    keys = _.keys(json) 

    // assumption : 'Status', 'TemplateID', '_id' are never a header 
    // remove keys which shouldn't be treated as header 
    keys = _.without(keys, 'Status', 'TemplateID', '_id') 
    return keys; 
    } 
}) 

模板：

<table> 
    <thead> 
    <tr> 
    {{#each headers}} 
     <th>{{this}}</th> 
    {{/each}} 
    </tr> 
    </thead> 
    ...