I have the following HTML code. I have mented 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>

I have the following HTML code. I have mented 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>

• javascript
• html
• css
• arrays

Share Improve this question Follow edited Sep 18, 2021 at 12:49 bad_coder 13k2020 gold badges5656 silver badges8888 bronze badges asked Sep 18, 2021 at 12:14 Deepak LohmodDeepak Lohmod 2,28222 gold badges1111 silver badges2222 bronze badges 1

• Does this answer your question? Generate a table from array of objects – pilchard Commented Sep 18, 2021 at 12:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

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);

You can create an array of objects, iterate through it to create a string with HTML which you will append into your HTML, and then append it.

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;