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>

Does this answer your question? [Generate a table from array of objects](https://stackoverflow.com/questions/54505217/generate-a-table-from-array-of-objects) — pilchard, Sep 18 '21 at 12:30

score 2 · Accepted Answer · edited Sep 18 '21 at 12:53

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>

Thanks a lot it worked, but needed some changes like replace afterbegin with beforeend and in query selector change .data with .table. As there was no padding among the elements. — Deepak Lohmod, Sep 18 '21 at 14:01
You should be using `forEach()` here since you're not doing anything with the array returned from `map()` see: [JavaScript: Difference between .forEach() and .map()](https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map) — pilchard, Sep 18 '21 at 14:13

score 1 · Answer 2 · answered Sep 18 '21 at 12:38

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

score 0 · Answer 3 · answered Sep 18 '21 at 12:28

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;

How to show array elements in HTML using JavaScript

3 Answers3