Tengo el siguiente código HTML. He comentado la parte del código que quiero repetir nuevamente para mostrar los elementos de la matriz. Y mi matriz contiene nombres como este: - var name=['amit','mayank','jatin']; . Entonces, quiero mostrar 10 bloques de este tipo, ya que mi matriz contiene 10 nombres de este tipo que se obtienen del backend.
<div class="limiter"> <div class="container-table100"> <div class="wrap-table100"> <div class="table"> <div class="row header"> <div class="cell"> Rank </div> <div class="cell"> Name </div> <div class="cell"> Quiz Name </div> <div class="cell"> Scores </div> </div> //repeat below code <div class="row"> <div class="cell" data-title="Full Name"> 1 </div> <div class="cell" data-title="Age"> Amit Singh </div> <div class="cell" data-title="Job Title"> Python Quiz </div> <div class="cell" data-title="Location"> 100 </div> </div> //till here </div> </div> </div> </div>Hay muchos caminos, este es uno de ellos.
En este ejemplo, tenemos un querySelector que obtiene el elemento con data de nombre de clase para que el código HTML se pueda insertar en este lugar.
El método map() se utiliza para llamar a la función proporcionada una vez para cada elemento de una matriz, en orden, de modo que se pueda crear la tabla con todos los datos de la matriz.
Espero ser útil para usted.
const dataElement = document.querySelector('.data'); const data = [ {fullName: 'Nathan', age: 21, jobTitle: 'Programmer', location: 'IRAN'}, {fullName: 'Ali', age: 21, jobTitle: 'Programmer', location: 'UK'}, {fullName: 'Ariana', age: 21, jobTitle: 'Programmer', location: 'US'}, ]; data.map(item => { dataElement.insertAdjacentHTML('afterbegin', ` <div class="cell" data-title="Full Name"> ${item.fullName} </div> <div class="cell" data-title="Age"> ${item.age} </div> <div class="cell" data-title="Job Title"> ${item.jobTitle} </div> <div class="cell" data-title="Location"> ${item.location} </div> `) }) <div class="limiter"> <div class="container-table100"> <div class="wrap-table100"> <div class="table"> <div class="row header"> <div class="cell"> Rank </div> <div class="cell"> Name </div> <div class="cell"> Quiz Name </div> <div class="cell"> Scores </div> </div> //repeat below code <div class="row data"> </div> //till here </div> </div> </div> </div>Convierta ese elemento en una cadena, recorra la matriz dada, inserte usando insertAdjacentHTML .
const names = ['amit', 'mayank', 'jatin']; const tableBody = names .map((name) => ` <div class="row"> <div class="cell" data-title="Full Name">1</div> <div class="cell" data-title="Age">${name}</div> <div class="cell" data-title="Job Title">Python Quiz</div> <div class="cell" data-title="Location">100</div> </div>`).join(''); const rowHeader = document.querySelector('.table > .header'); rowHeader.insertAdjacentHTML('afterend', tableBody);Puede crear una matriz de objetos, iterar a través de ella para crear una cadena con HTML que agregará a su HTML y luego la agregará.
const tableEl = document.querySelector('.table'); let htmlToAppend = ""; let data = [ { name: 'John Doe', age: 20, job: 'Cashier', location: 'London' }, { name: 'Jane Doe', age: 30, job: 'Taxi driver', location: 'New York' }, { name: 'Bill Gates', age: 65, job: 'Entertainer', location: 'Moldovia' }, { name: 'Donald Darko', age: 19, job: 'Student', location: 'Middlesex' }, ]; data.forEach(entry => { htmlToAppend += `<div class="row"> <div class="cell" data-title="Full Name"> ${entry.name} </div> <div class="cell" data-title="Age"> ${entry.age} </div> <div class="cell" data-title="Job Title"> ${entry.job} </div> <div class="cell" data-title="Location"> ${entry.location} </div> </div>` }) tableEl.innerHTML = htmlToAppend;