2016-05-16 74 views
1

我想顯示一個JSON代碼到一個HTML表格。我有這樣的JSON:我如何顯示在HTML角度嵌套的JSON元素

posts:[ 
 
    { 
 
    "category":[], 
 
    "status":[] 
 
    
 
    }, 
 
    { 
 
    "category": 
 
    [ 
 
     { 
 
     "ID_post":"2", 
 
     "category":"5 Reasons", 
 
     "ID_cat":"1" 
 
     
 
     }, 
 
     { 
 
     "ID_post":"2", 
 
     "category":"Advertising", 
 
     "ID_cat":"2" 
 
     
 
     } 
 
    ], 
 
    "status": 
 
    [ 
 
     { 
 
     "ID_post":"2", 
 
     "status":"Approved", 
 
     "ID_stat":"1", 
 
     "color":"red" 
 
     
 
     }, 
 
     { 
 
     "ID_post":"2", 
 
     "status":"Placed", 
 
     "ID_stat":"2", 
 
     "color":"#1800fb" 
 
     
 
     } 
 
    ] 
 
    
 
    } 
 
]

我想說明的狀態的顏色爲HTML表是這樣的:

<tr> 
 
    <th>Web Status</th> 
 
</tr> 
 
<tbody ng-repeat="post in posts | startFrom: start | limitTo: limit"> 
 
    <tr> 
 
    <td>{{post.status}}</td> 
 
    </tr> 
 
</tbody>

它返回的東西像這樣在第二篇文章中:

[{"ID_post":"2","status":"Approved","ID_stat":"1","color":"red"},{"ID_post":"2","status":"Placed","ID_stat":"2","color":"#1800fb"}]

但我需要每個崗位的顏色。我怎麼才能得到它?我試着用post.status.color,但它不起作用。 有人可以幫我嗎? 謝謝!

回答

1

如果要在表中顯示的所有是各狀態下的顏色,則可以採取一種方法是捕捉「狀態」的數據在一個單獨的陣列,例如$scope.statuses = posts[1].status。然後依次通過該數組中的HTML:

<tbody ng-repeat="status in statuses| startFrom: start | limitTo: limit"> 
    <tr> 
    <td>{{status.color}}</td> 
    </tr> 
</tbody> 

以您目前的數據結構,posts是具有兩個元件的陣列。 ng-repeat直接循環通過此數組中的每個元素。第一個元素posts[0]是一個具有兩個空數組屬性的對象。因此,第一個{{post.status}}是空的。第二個元素​​又是一個對象,其屬性爲「category」和狀態,每個對象都有填充數組。通過第二個元素,{{post.status}}將在posts[1].status中顯示所有數據。

所以,如果您需要顯示的只是每種狀態的顏色,那麼將posts[1].status捕獲到單獨的變量中將是最容易的。如果您需要顯示類別數據以及狀態數據,則可能需要將這兩個數組合併成一個數組。看到這個例子:In Angular, how do you loop through two arrays to populate a third?

0

狀態是一個數組。

要訪問的每一個你需要定義一個指數,例如狀態的顏色:

post.status[0].color 

你的數據看起來很奇怪,我認爲這個問題是該職位已超過一個狀態。