Как да създадете таблица от масив от обекти в JavaScript

На уеб страница неподравнените данни могат да намалят четливостта и да създадат проблеми за зрителите. За да се справите с подобни ситуации, можете да използвате таблиците, за да сортирате данните по по-добър начин. Таблиците предоставят страхотен формат за подравняване на данни и подобряване на четливостта и видимостта. Тъй като таблиците могат да бъдат създадени с помощта на HyperText Markup Language (HTML), който може да бъде свързан с JavaScript.

Тази публикация ще обясни процедурата за формиране на таблица с масив от обекти в JavaScript.

Как да създадете таблица от масив от обекти в JavaScript?

За да създадем таблица от масив от обекти, ще използваме следните методи:

Низ на HTML таблица
метод map().

Нека разгледаме всеки метод един по един!

Метод 1: Създаване на таблица от масив от обекти с помощта на низ на HTML таблица в JavaScript

В JavaScript целта на „ низ ” е за съхраняване на текст, числа или специални символи. Низовете се дефинират чрез затваряне на знак или група от знаци в двойни или единични кавички. По-конкретно, те се използват и за създаване на таблици.

Нека вземем пример, за да получим ясна концепция за създаването на таблица от масив от обекти с помощта на низа Table.

Пример

В нашия пример ще използваме „

„таг с идентификатор“ контейнер ” и го поставете в тага на нашия HTML файл:

< div id = 'контейнер' > див >

Нека декларираме „ масив ” и му присвоете някои стойности:

беше масив = [ 'Марк' , 'Врабче' , 'риба' , 'портокал' ] ;

Инициализиране на променлива ' Таблица ”, за да съхраните низа на HTML таблицата:

var Таблица = '<таблица>' ;

Посочете двете клетки на ред, като зададете стойността „ две ' от ' клетки ” променлива:

всяка клетка = две ;

След това използвайте „ array.for Every() ” за предаване на всеки елемент от масива от функцията. След това задайте „ {стойност} 'с идентификатор' $ ” в рамките на „ ” таг. След това декларирайте променлива ' а ” за добавяне за увеличаване на индекса “ аз “, и посочете „ ако ” условие по такъв начин, че ако остатъкът от стойностите на клетките и създадената променлива е равен на нула и стойността „ а ” не е равна на дължината на масива, след това преминете към следващия ред или ред на таблицата:

масив. за всеки ( ( стойност, т.е ) => {
Таблица += ` < TD > $ { стойност } TD > ` ;
има = аз + 1 ;
ако ( а % клетки == 0 && а != масив. дължина ) {
Таблица += '' ;
} } ) ;

Присвоете етикетите за затваряне на таблицата на променливата „ Таблица ' използвайки ' += ' оператор. След това свържете съдържанието на таблицата със създадения контейнер, като използвате неговия контейнер. За целта използвайте „ омаловажаване() ” и предайте идентификатора към него и поставете вътрешния HTML, за да зададете стойностите в таблицата на променливата:

Таблица += '' ;

документ. омаловажаване ( 'контейнер' ) . атрешна HTML = Таблица ;

В нашия CSS файл , ще приложим някои свойства към таблицата и нейните клетки с данни. За да направим това, ще зададем „ граница ' свойство със стойност ' 1px плътен ”, за да зададете границата около таблицата и нейните клетки и „ подплата ' свойство със стойност ' 3px ”, за да генерирате дефинираното пространство около съдържанието на елемента, според дефинираната граница:

маса,TD {

граница : 1px плътен ;

подплата : 3px ;

}

Запазете дадения код, отворете вашия HTML файл и прегледайте таблицата си с обекти на масив:

Нека проучим още един метод за създаване на таблица от масив от обекти в JavaScript.

Метод 2: Създаване на таблица от масив от обекти с помощта на метода map() в JavaScript

„ карта() ” прилага специфична функция към всеки елемент от масива и в замяна предоставя нов масив. Този метод обаче не прави никакви замени в оригиналния масив. Можете също така да използвате метода map(), за да формирате таблица с масив от обекти.

Пример

Нека създадем масив с помощта на „ позволявам ” ключова дума. Задайте някои стойности на свойствата или ключовете на обекта:

нека масив = [
{ 'Име' : 'Марк' , 'възраст' : 'Двадесет (20)' } ,
{ 'Име' : 'Какво аз' , 'възраст' : 'Тридесет (30)' } ]

Достъп до вече създадения контейнер, като използвате метода bettlement() и използвайте „ вмъкване на съседен HTML () ” за добавяне на етикетите на таблицата:

документ. омаловажаване ( 'контейнер' ) . вмъкване на съседен HTML ( 'после' ,

` < маса >< тр >< th >

Използвай ' Object.keys() ' за достъп до ключовете на дефинирания обект и след това използвайте ' присъединяване() ”, за да ги поставите като заглавия в „ ” етикет:

$ { Обект . ключове ( масив [ 0 ] ) . присъединяване ( '' ) }

След като добавим затварящия таг за главата на таблицата и реда на таблицата и отварящия таг за данни, ще използваме „ карта() ' метод за извикване на ' Object.values() ' метод функция за всяка стойност на ключовете на обекта, след това използвайте ' присъединяване() ”, за да ги поставите в ред и да преминете към следващия:

th >< тр >< TD > $ { масив. карта ( и => Обект . стойности ( и )

. присъединяване ( „“ ) ) . присъединяване ( „“ ) } маса > ` )

Както можете да видите, успешно създадохме таблица от дефинирания масив от обекти:

Разгледахме ефективните начини за създаване на таблица от масив от обекти в JavaScript.

Заключение

В JavaScript, за формиране на таблица от масив от обекти, HTML „ маса ' низ или ' карта() ” може да се използва методът. За да направите това, посочете div таг с id. След това декларирайте масива от обекти и в двата метода, съхранявайте тагове на таблица в променливи или директно ги върнете към свързан HTML елемент с данни. Тази публикация обсъжда метода за създаване на таблица от масив от обекти с помощта на JavaScript.

Как да създадете таблица от масив от обекти в JavaScript