如何通過Javascript/JQuery（Ampersand.js/Angular）用對象數組對象填充html表格

我試圖填充按類別顯示內容的HTML表格。我需要在不使用JQuery Datatables的情況下執行此操作。所以我試圖用一個普通的HTML表格來做到這一點。如何通過Javascript/JQuery（Ampersand.js/Angular）用對象數組對象填充html表格

這裏是我的對象數組的對象：

Object { 
    Fruits: [ 
     Apple: { 
      {color: 'red'}, 
      {healthy: true} 
     }, 
     Orange: { 
      {color: 'orange'}, 
      {healthy: true} 
     }, 
     Grape: { 
      {color: 'purple'}, 
      {healthy: true} 
     } 
    ], 
    Sweets: [ 
     Candy: { 
      {color: 'pink'}, 
      {healthy: false} 
     } 
    ], 
}

我試圖填充一個HTML表格，將看起來像這樣（按類別分開）：

______________________________________ 
| Name  | Color | Healthy? | 
-------------------------------------- 
|Fruits        | 
-------------------------------------- 
| Apple  |  Red |  True | 
|----------------------|-------------- 
| Orange | Orange |  True | 
|----------------------|-------------- 
| Grape  | Purple |  True | 
|----------------------|-------------- 
| Sweets        | 
|------------------------------------- 
| Candy | Pink |  False | 
--------------------------------------

我使用Ampersand.js /角。我正在過濾從集合中需要的數據，並嘗試將它們放入另一個對象中以便用於填充HTML表格。

是否有可能做我想做的事情？有沒有比數組對象更容易設置數據的方法？

來源

2017-04-17 Knuxchan

這似乎很容易通過普通的JavaScript來完成。你試過什麼了？你有什麼特別的問題嗎？ – Bardo

我有數據被填充到對象數組的對象中，但我不知道如何實際填充HTML表格以使其看起來像上面那樣。我知道我將不得不循環這一點，但我使用了預定義的表格模板。我是否需要覆蓋循環中的模板？ – Knuxchan

是的，雖然你的表格模板能夠識別你的數據對象，你需要重寫它。 AFAIK沒有預定義的方法將數據對象引入html表格。根據您的模板結構和數據對象編程，也許您可以在數據對象原型中添加一個方法來生成html，因此每次需要從任何這些對象填充表時，您只需調用該方法即可。 – Bardo

我不確定表格內是否可行，但我們可以創建引導列並添加一些自定義CSS以使其看起來像表格一樣。而且，不是擁有多個數組，您可以擁有一個具有「type」和「name」屬性的單個數組對象。您當前的數據將如下所示。

$scope.data = [{ name:'Apple', color: 'red', healthy: true, type: 'Fruits'}, { name:'Orange', color: 'orange', healthy: true, type: 'Fruits'}, { name:'Grape', color: 'purple', healthy: true, type: 'Fruits'}, { name:'Candy', color: 'pink', healthy: false, type: 'Sweets'}];

在angularjs，可以基於一個屬性組的項目如果包括角濾波器。請記住，只有orderBy可用於角度。如果您需要使用groupBy，則應將'angular-filter'添加到您的應用中。您可以閱讀有關角度過濾器here的更多詳細信息。

希望這個jsfiddle幫助。

來源

2017-04-17 17:03:31 gilango

如何通過Javascript/JQuery（Ampersand.js/Angular）用對象數組對象填充html表格

回答

相關問題