Display Array Data in Table

Question

I have a div with id="result", I want to show my data in this div tag.

How to append this table data.

I did not understand in table data tag table is in the string so how it works

function displayAddress() {
  if (flag == 0) {
    tabledata = "<table style='position: fixed; background-color:lightgrey; border: 1px solid black; border-collapse: collapse;  margin-top: 25px;' border = '1'><tr><th>Name</th><th>Type</th><th>Address</th><th>Email</th><th>Mobile</th><th>Location</th></tr>";
  }
  for (i = 0; i < dataArray.length; i++) {
    var tempname = dataArray[i].Name;
    var temptype = dataArray[i].Type;
    var tempaddress = dataArray[i].Address;
    var tempemail = dataArray[i].Email;
    var tempmobile = dataArray[i].Mobile;
    var templocation = dataArray[i].Location;
    //Please fill the required code to store the values in tabledata.
  }

  console.log(tabledata);
  if (flag == 0) {
    //Please fill the required code to store the table data in result.
    document.getElementById("name").value = "";
    document.getElementsByName("type").checked = false;
    document.getElementById("address").value = "";
    document.getElementById("email").value = "";
    document.getElementById("mobile").value = "";
    document.getElementById("location").value = "";
  }
  count = 0;
}

I made you a snippet. Please add relevant data and HTML for a minimal reproducible example — mplungjan
– mplungjan, Commented May 20, 2020 at 12:59
You have tabledata but you do nothing with that variable. I expect that you want to add the HTML in tabledata to the div with the id result? If so Inserting HTML into a div — Heretic Monkey
– Heretic Monkey, Commented May 20, 2020 at 13:11
Does this answer your question? display array of objects in a dynamic table javascript — Heretic Monkey
– Heretic Monkey, Commented May 20, 2020 at 13:13

mplungjan · Accepted Answer · 2020-05-20 13:48:58Z

This is one way

const dataArray = [{
    "Name": "Joe",
    "Type": "Contractor",
    "Address": "Address 1",
    "Email": "[email protected]",
    "Mobile": "0123456789",
    "Location": "At home"
  },
  {
    "Name": "Jane",
    "Type": "Contractor",
    "Address": "Address 2",
    "Email": "[email protected]",
    "Mobile": "1234567890",
    "Location": "At home"
  }

];
const tb = document.getElementById("tb");
let tr = [];
dataArray.forEach(item => {
  tr.push('<tr><td>' + item.Name + '</td>')
  tr.push('<td>' + item.Type + '</td>')
  tr.push('<td>' + item.Address + '</td>')
  tr.push('<td>' + item.Email + '</td>')
  tr.push('<td>' + item.Mobile + '</td>')
  tr.push('<td>' + item.Location + '</td></tr>')
})
tb.innerHTML = tr.join("");
document.getElementById("result").classList.remove("hide"); // show

#table1 {
  position: fixed;
  background-color: lightgrey;
  border: 1px solid black;
  border-collapse: collapse;
  margin-top: 25px;
}

#table1 tr td {
  border: 1px solid black;
}
.hide  { display:none; }

<div id="result" class="hide">
  <table id="table1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Address</th>
        <th>Email</th>
        <th>Mobile</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody id="tb"></tbody>
  </table>
</div>

Alternative method using template literals

dataArray.forEach(item => {
  tr.push(`<tr>
             <td>${item.Name}</td>
             <td>${item.Type}</td>
             <td>${item.Address}</td>
             <td>${item.Email}</td>
             <td>${item.Mobile}</td>
             <td>${item.Location}</td>
           </tr>`);
})

Mister Jojo · Accepted Answer · 2020-05-20 14:14:59Z

0

for mysself I do that [very shorter] way.

All the documentation is here -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

const resultDiv = document.getElementById('result')
  ,   myTable   = resultDiv.appendChild(document.createElement('table'))      // create the TABLE
  ,   rowList = 
        [ { lib:'Names',   key: 'Name'    }, { lib:'Types',     key:'Type'  } 
        , { lib:'Address', key: 'Address' }, { lib:'eMails',    key:'Email' } 
        , { lib:'phone',   key: 'Mobile'  }, { lib:'Locations', key:'Location' } 
        ];
// sample data  
const dataArray = 
  [ { Name: "Joe", Type: "Contractor", Address: "Address 1", Email: "[email protected]", Mobile: "0123456789", Location: "At home"} 
  , { Name: "Jane", Type: "Contractor", Address: "Address 2", Email: "[email protected]", Mobile: "0987654321", Location: "someWhere"} 
  ] 
;
dataArray.forEach(item=>
  {
  let newRow = myTable.insertRow()
  rowList.forEach(rowName=>newRow.insertCell().textContent = item[rowName.key])
  })

// make header part at last
let theHeader = myTable.createTHead().insertRow()
rowList.forEach(rowName=>theHeader.insertCell().textContent = rowName.lib)

/* cosmetic part */

table {
  border-collapse: collapse;
  margin-top: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}
thead {
  background-color: aquamarine;
}
tbody {
  background-color: #b4c5d8;
}
td {
  border: 1px solid grey;
  padding: .3em .7em;
}

<div id="result"></div>

edited May 20, 2020 at 14:14

answered May 20, 2020 at 13:29

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

2 Comments

mplungjan Over a year ago

Your thead has TDs and not THs - also you would need to change the script if the headers names were different than the data keys. Still an interesting approach. I wonder how expensive this is with a lot of rows

Mister Jojo Over a year ago

@mplungjan without scope attribute th element are not usefull, and here all of this are in a thead part of the table. I also changed my code show how to deal with heraders names (not a big change)

Emir Tanır · Accepted Answer · 2020-05-20 13:04:04Z

-1

there are two ways, the easy version is

document.getElementById("element").innerHTML = yourArray[0]
document.getElementById("element").innerHTML = yourArray[1]
document.getElementById("element").innerHTML = yourArray[2]
...

second way is map() method

yourArray.map(item => {
  elements.innerHTML = item
});

if you use a framework (like Vue, React) second way is more easier

dont work try this

var email = yourArray[0]
var password  = yourArray[1]
var table = "<table><tr> <td>" + email + "</td><td>" + password "</td></tr></table>

edited May 20, 2020 at 13:04

answered May 20, 2020 at 13:00

Emir Tanır

427 bronze badges

2 Comments

mplungjan Over a year ago

elements.innerHTML = item is not going to work. Also no need for a map if you do not need a new array.

Emir Tanır Over a year ago

:( elements variable just an example

Collectives™ on Stack Overflow

Display Array Data in Table

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest