В этом посте объясняется процедура формирования таблицы с массивом объектов в JavaScript.
Как создать таблицу из массива объектов в JavaScript?
Для создания таблицы из массива объектов воспользуемся следующими методами:
Давайте рассмотрим каждый метод один за другим!
Метод 1: создание таблицы из массива объектов с использованием строки HTML-таблицы в JavaScript
В JavaScript цель « нить ” предназначен для хранения текста, чисел или специальных символов. Строки определяются путем закрытия символа или группы символов в двойных или одинарных кавычках. В частности, они также используются для создания таблиц.
Давайте возьмем пример, чтобы получить четкое представление о создании таблицы из массива объектов с использованием строки таблицы.
Пример
В нашем примере мы будем использовать « <дел> 'тег с идентификатором' контейнер ” и поместите его в тег
нашего HTML-файла: < идентификатор div знак равно 'контейнер' > див >Давайте объявим « множество ” и присвойте ему некоторые значения:
был массив знак равно [ 'Отметка' , 'Воробей' , 'Рыбы' , 'Апельсин' ] ;
Инициализировать переменную ' Стол », чтобы сохранить строку таблицы HTML:
вар Таблица знак равно '<таблица>Укажите две ячейки в строке, установив значение « два ' принадлежащий ' клетки ' переменная:
каждая ячейка знак равно два ; Далее используйте « массив.для каждого() ” для передачи каждого элемента массива из функции. Затем установите « {ценность} 'с идентификатором' $ ” внутри “ ' ярлык. Затем объявите переменную « а 'добавить для увеличения индекса' я ', и указать ' если » условие таким образом, что если остаток значений ячеек и созданной переменной равен нулю, а значение « а ” не равно длине массива, то переходим к следующей строке или строке таблицы: множество. за Каждый ( ( ценность, я ) => {
Стол += ` < ТД > $ { ценность } ТД > ` ;
Eсть знак равно я + 1 ;
если ( а % клетки == 0 && а знак равно множество. длина ) {
Стол += '
} } ) ;
Присвойте закрывающие теги таблицы переменной « Стол ' с использованием ' += оператор. Затем свяжите содержимое таблицы с созданным контейнером, используя его контейнер. Для этого используйте « умаление () », передайте ему идентификатор и поместите внутренний HTML-код, чтобы установить значения в переменной Table:
Стол += 'документ. умаление ( 'контейнер' ) . внутренний HTML знак равно Стол ;
В нашем CSS-файле , мы применим некоторые свойства к таблице и ее ячейкам данных. Для этого установим « граница ” свойство со значением “ 1 пиксель сплошной », чтобы установить границу вокруг таблицы и ее ячеек, и « набивка ” свойство со значением “ 3 пикселя », чтобы создать определенное пространство вокруг содержимого элемента в соответствии с определенной границей:
стол, ТД {граница : 1 пиксель сплошной ;
набивка : 3 пикселя ;
}
Сохраните данный код, откройте свой HTML-файл и просмотрите свою таблицу объектов массива:
Давайте рассмотрим еще один метод создания таблицы из массива объектов в JavaScript.
Способ 2: создать таблицу из массива объектов с помощью метода map() в JavaScript
“ карта() ” применяет определенную функцию к каждому элементу массива, а взамен предоставляет новый массив. Однако этот метод не производит никаких замен в исходном массиве. Вы также можете использовать метод map() для формирования таблицы с массивом объектов.
Пример
Давайте создадим массив, используя « позволять ключевое слово. Назначьте некоторые значения свойствам или ключам объекта:
пусть массив знак равно [{ 'Имя' : 'Отметка' , 'Возраст' : «Двадцать (20)» } ,
{ 'Имя' : 'Что я' , 'Возраст' : «Тридцать (30)» } ]
Получите доступ к уже созданному контейнеру с помощью метода умаления () и используйте « вставить соседнийHTML() ” для добавления тегов таблицы:
документ. умаление ( 'контейнер' ) . вставкаAdjacentHTML ( 'после окончания' ,` < стол >< тр >< й >
Использовать ' Объект.keys() ', чтобы получить доступ к ключам определенного объекта, а затем использовать метод ' присоединиться() », чтобы поместить их в качестве заголовков в « <й> ' ярлык:
$ { Объект . ключи ( множество [ 0 ] ) . присоединиться ( '<й>' ) }После добавления закрывающего тега заголовка таблицы и тега открытия строки и данных мы будем использовать « карта() », чтобы вызвать « Объект.значения() ” для каждого значения ключей объекта, затем используйте “ присоединиться() », чтобы поместить их в строку и перейти к следующей:
й >< тр >< ТД > $ { множество. карта ( а также => Объект . ценности ( а также ). присоединиться ( '<ВП>' ) ) . присоединиться ( '<тр>
Как видите, мы успешно создали таблицу из заданного массива объектов:
Мы рассмотрели эффективные способы создания таблицы из массива объектов в JavaScript.
Вывод
В JavaScript для формирования таблицы из массива объектов HTML « стол ” строка или “ карта() можно использовать метод ». Для этого укажите тег div с идентификатором. Затем объявите массив объектов в обоих методах, сохраните теги таблицы в переменных или напрямую верните их в связанный элемент HTML с данными. В этом посте обсуждался метод создания таблицы из массива объектов с использованием JavaScript.