How to show array elements in HTML using JavaScript

Question

I have the following HTML code. I have commented the part of code which i want to repeat again for displaying the elements of the array. And my array contains names like this:- var name=['amit','mayank','jatin'];. So i want to display 10 such blocks as my array contains 10 such names which are fetched from 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>

Answer 1

There's a lot of way , this is one of them.

In this example we have a querySelector which gets the element with class name data so the HTML code can be inserted in this place.

The map() method is used to call the provided function once for each element in an array, in order, so the table with all the data of the array can be created.

I hope be useful for you.

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>

Answer 2

Convert that element to string, loop through the given array, insert using 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);