In dit bericht wordt de procedure uitgelegd om een tabel met een reeks objecten in JavaScript te vormen.
Hoe maak je een tabel van een array van objecten in JavaScript?
Om een tabel te maken van een array van objecten, gebruiken we de volgende methoden:
Laten we elke methode een voor een bekijken!
Methode 1: Maak een tabel van een array van objecten met behulp van HTML Table String in JavaScript
In JavaScript is het doel van een ' snaar ” is om tekst, cijfers of speciale symbolen op te slaan. Tekenreeksen worden gedefinieerd door een teken of een groep tekens te sluiten tussen dubbele of enkele aanhalingstekens. Meer specifiek worden ze ook gebruikt voor het maken van tabellen.
Laten we een voorbeeld nemen om een duidelijk concept te krijgen over het maken van een tabel uit een reeks objecten met behulp van de tabelreeks.
Voorbeeld
In ons voorbeeld gebruiken we een ' Laten we een ' reeks ” en wijs er enkele waarden aan toe: Initialiseer een variabele ' Tafel ” om de HTML-tabeltekenreeks op te slaan: Specificeer de twee cellen per rij door de waarde “ twee ' van de ' cellen ” variabele: Gebruik vervolgens de ' array.for Each() ” methode om elk array-element van de functie door te geven. Stel vervolgens de ' {waarde} ' met een identificatie ' $ ' binnen de ' Wijs de tabelafsluitingstags toe aan de variabele “ Tafel ' de ... gebruiken ' += ” exploitant. Koppel vervolgens de inhoud van de tabel aan de gemaakte container met behulp van de container. Gebruik daarvoor de “ kleineren() ”-methode en geef de id eraan door en plaats de binnenste HTML om de waarden in de variabele Tabel in te stellen: In ons CSS-bestand , we zullen enkele eigenschappen toepassen op de tabel en zijn gegevenscellen. Om dit te doen, stellen we de ' grens ” eigenschap met de waarde “ 1px vast ' om de rand rond de tabel en zijn cellen in te stellen en de ' opvulling ” eigenschap met de waarde “ 3px ” om de gedefinieerde ruimte rond de elementinhoud te genereren, volgens de gedefinieerde rand: Sla de gegeven code op, open uw HTML-bestand en bekijk uw tabel met de objecten van een array: Laten we nog een methode verkennen voor het maken van een tabel uit een reeks objecten in JavaScript. De ' kaart() ”-methode past een specifieke functie toe op elk element van de array en levert in ruil daarvoor een nieuwe array. Deze methode maakt echter geen vervangingen in de originele array. U kunt ook de methode map() gebruiken om een tabel te vormen met een reeks objecten. Laten we een array maken met behulp van de ' laten ” trefwoord. Ken enkele waarden toe aan de objecteigenschappen of sleutels: Open de reeds gemaakte container met behulp van de belittlement()-methode en gebruik ' insertAdjacentHTML() ” methode om de tabeltags toe te voegen: Gebruik de ' Object.keys() ' om toegang te krijgen tot de sleutels van het gedefinieerde object en gebruik vervolgens de ' meedoen() ”-methode om ze als koppen in de “ Nadat we de tag voor het sluiten van de tabelkop en de tabelrij en de openingstag voor gegevens hebben toegevoegd, gebruiken we de ' kaart() ” methode om de “ Object.waarden() 'methodefunctie voor elke waarde van de objectsleutels en gebruik vervolgens de ' meedoen() ” methode om ze in een rij te plaatsen en naar de volgende te gaan: Zoals u kunt zien, hebben we met succes een tabel gemaakt van de gedefinieerde reeks objecten: We hebben de efficiënte manieren besproken om een tabel te maken van een reeks objecten in JavaScript. In JavaScript, voor de vorming van een tabel uit een reeks objecten, de HTML ' tafel ” tekenreeks of “ kaart() ”-methode kan worden gebruikt. Geef hiervoor een div-tag op met een id. Declareer vervolgens de array van objecten in beide methoden, sla tabeltags op in variabelen of stuur ze rechtstreeks terug naar een verbonden HTML-element met gegevens. Dit bericht heeft de methode besproken voor het maken van een tabel uit een array van objecten met behulp van JavaScript.
was reeks = [ 'Markering' , 'Mus' , 'Vis' , 'Oranje' ] ;
' ;
' label. Declareer vervolgens een variabele ' a ' om toe te voegen om de index te verhogen ' i ”, en specificeer een “ als ” voorwaarde op een zodanige manier dat als de rest van de celwaarden en de gecreëerde variabele gelijk is aan nul en de waarde “ a ” is niet gelijk aan de lengte van de array, en breek dan op in de volgende regel of rij van de tabel: reeks. voor Elk ( ( waarde, ik ) => {
Tafel += ` < TD > $ { waarde } TD > ` ;
er is een = i + 1 ;
als ( a % cellen == 0 && a != reeks. lengte ) {
Tafel += '' ; '
} } ) ;
document. kleineren ( 'container' ) . innerlijk HTML = Tafel ;
grens : 1px vast ;
opvulling : 3px ;
}
Methode 2: Maak een tabel van een array van objecten met de methode map() in JavaScript
Voorbeeld
{ 'Naam' : 'Markering' , 'Leeftijd' : 'Twintig (20)' } ,
{ 'Naam' : 'Wat ik' , 'Leeftijd' : 'Dertig (30)' } ]
` < tafel >< tr >< e >
. meedoen ( '' ) ) . meedoen ( ' ' ) } tafel > ` )
Conclusie