Как заполнить HTML-таблицу объектом массива объектов через Javascript/JQuery (Ampersand.js/Angular)

Question

Я пытаюсь заполнить таблицу HTML, которая отображает содержимое по категориям. Мне нужно сделать это без использования JQuery Datatables. Поэтому я пытаюсь сделать это с помощью обычной таблицы 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/Angular. Я отфильтровываю нужные мне данные из коллекции и пытаюсь поместить их в другой объект, чтобы использовать для заполнения таблицы HTML.

Можно ли сделать то, что я пытаюсь сделать? Есть ли более простой способ настроить данные, чем объект массива объектов?

Answer 1

Я не уверен, возможно ли это внутри таблицы, но мы можем создать столбец начальной загрузки и добавить несколько пользовательских CSS, чтобы выглядеть как таблица. Кроме того, вместо нескольких массивов вы можете иметь один массив объектов с дополнительными свойствами типа "тип" и "имя". Ваши текущие данные будут выглядеть так.

$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 вы можете группировать элементы, основываясь на свойстве, если вы включите angular-filter. Помните только orderBy доступен из коробки в угловой. Если вам нужно использовать groupBy Вы должны включить 'angular-filter' в ваше приложение. Подробнее об угловом фильтре вы можете прочитать здесь.

Надеюсь, это поможет jsfiddle.