如何通过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表格

回答

相关问题