Kako stvoriti tablicu iz niza objekata u JavaScriptu

Na web stranici neusklađeni podaci mogu smanjiti čitljivost i stvoriti probleme gledateljima. Da biste riješili takve situacije, možete upotrijebiti tablice za bolje sortiranje podataka. Tablice pružaju odličan format za poravnavanje podataka i poboljšanje čitljivosti i vidljivosti. Tablice se mogu izraditi pomoću jezika za označavanje hiperteksta (HTML), koji se može povezati s JavaScriptom.

Ovaj će post objasniti postupak formiranja tablice s nizom objekata u JavaScriptu.

Kako stvoriti tablicu iz niza objekata u JavaScriptu?

Za izradu tablice iz niza objekata koristit ćemo sljedeće metode:

Niz HTML tablice
metoda map().

Istražimo svaku metodu jednu po jednu!

Metoda 1: Stvorite tablicu iz niza objekata pomoću niza HTML tablice u JavaScriptu

U JavaScriptu, svrha ' niz ” je za pohranjivanje teksta, brojeva ili posebnih simbola. Nizovi se definiraju zatvaranjem znaka ili grupe znakova u dvostruke ili jednostruke navodnike. Točnije, također se koriste za izradu tablica.

Uzmimo primjer kako bismo dobili jasan koncept stvaranja tablice iz niza objekata pomoću niza tablice.

Primjer

U našem primjeru koristit ćemo '

'oznaka s ID-om' spremnik ” i smjestite ga unutar oznake naše HTML datoteke:

< div id = 'kontejner' > div >

Proglasimo ' niz ” i dodijelite mu neke vrijednosti:

bio niz = [ 'Ocjena' , 'Vrabac' , 'Riba' , 'Naranča' ] ;

Inicijaliziraj varijablu ' Stol ” za pohranjivanje niza HTML tablice:

var Tablica = '' ;

Odredite dvije ćelije po retku postavljanjem vrijednosti ' dva ' od ' Stanice ” varijabla:

svaka stanica = dva ;

Zatim upotrijebite ' array.for Every() ” za prosljeđivanje svakog elementa niza iz funkcije. Zatim postavite ' {vrijednost} 's identifikatorom' $ ' unutar '

' ;
} } ) ;
Dodijelite oznake za zatvaranje tablice varijabli ' Stol ' koristiti ' += ” operator. Zatim povežite sadržaj tablice sa stvorenim spremnikom koristeći njegov spremnik. Za to upotrijebite ' omalovažavanje() ” i proslijedite joj ID te postavite unutarnji HTML za postavljanje vrijednosti unutar varijable Tablica:
Stol += '

” oznaka. Zatim deklarirajte varijablu ' a ” za dodavanje za povećanje indeksa “ ja ', i navedite ' ako ” uvjet na način da ako je ostatak vrijednosti ćelija i kreirane varijable jednak nuli i vrijednost “ a ” nije jednake duljine niza, zatim prijeđite u sljedeći redak ili redak tablice:

niz. za Svaki ( ( vrijednost, i ) => {
Stol += ` < TD > $ { vrijednost } TD > ` ;
tamo je = ja + 1 ;
ako ( a % Stanice == 0 && a != niz. duljina ) {
Stol += '

' ;

dokument. omalovažavanje ( 'kontejner' ) . unutarnji HTML = Stol ;
U našoj CSS datoteci , primijenit ćemo neka svojstva na tablicu i njezine podatkovne ćelije. Da bismo to učinili, postavit ćemo ' granica ' svojstvo s vrijednošću ' 1px čvrsta ' za postavljanje obruba oko tablice i njenih ćelija i ' podstava ' svojstvo s vrijednošću ' 3 px ” za generiranje definiranog prostora oko sadržaja elementa, prema definiranoj granici:
stol,TD {

granica : 1px čvrsta ;

podstava : 3 px ;

}
Spremite navedeni kod, otvorite svoju HTML datoteku i pogledajte tablicu objekata niza:

Istražimo još jednu metodu za stvaranje tablice iz niza objekata u JavaScriptu.

Metoda 2: Stvaranje tablice iz niza objekata pomoću metode map() u JavaScriptu

' karta() ” primjenjuje specifičnu funkciju na svaki element niza, a zauzvrat daje novi niz. Međutim, ova metoda ne čini nikakve zamjene u izvornom nizu. Također možete koristiti metodu map() za formiranje tablice s nizom objekata.

Primjer

Kreirajmo polje koristeći ' neka ” ključna riječ. Dodijelite neke vrijednosti svojstvima ili ključevima objekta:
neka niz = [
{ 'Ime' : 'Ocjena' , 'Dob' : 'Dvadeset (20)' } ,
{ 'Ime' : 'Što ja' , 'Dob' : 'Trideset (30)' } ]
Pristupite već stvorenom spremniku pomoću metode bettlement() i upotrijebite ' umetni susjedni HTML() ” za dodavanje oznaka tablice:
dokument. omalovažavanje ( 'kontejner' ) . umetni susjedniHTML ( 'afterend' ,

` < stol >< tr >< th >
Koristiti ' Object.keys() ' za pristup ključevima definiranog objekta, a zatim upotrijebite ' pridružiti() ' kako biste ih smjestili kao naslove unutar ' ” oznaka:
$ { Objekt . ključevi ( niz [ 0 ] ) . pridružiti ( '' ) }
Nakon dodavanja oznake za zatvaranje glave tablice i oznake za otvaranje retka tablice i podataka, koristit ćemo ' karta() ' metoda za pozivanje ' Object.values() ' funkcija metode za svaku vrijednost ključeva objekta, zatim upotrijebite ' pridružiti() ” za njihovo postavljanje unutar retka i prelazak na sljedeći:
th >< tr >< TD > $ { niz. karta ( i => Objekt . vrijednosti ( i )

. pridružiti ( '' ) ) . pridružiti ( '' ) } stol > ` )
Kao što vidite, uspješno smo kreirali tablicu iz definiranog niza objekata:

Pokrili smo učinkovite načine stvaranja tablice iz niza objekata u JavaScriptu.

Zaključak

U JavaScriptu, za formiranje tablice iz niza objekata, HTML “ stol ” niz ili “ karta() ” može se koristiti metoda. Da biste to učinili, navedite div oznaku s ID-om. Zatim deklarirajte niz objekata u obje metode, pohranite oznake tablice unutar varijabli ili ih izravno vratite povezanom HTML elementu s podacima. Ovaj post raspravlja o metodi za stvaranje tablice iz niza objekata pomoću JavaScripta.

Kako stvoriti tablicu iz niza objekata u JavaScriptu