Display Array Data In Table

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

Solution 1:

This is one way

const dataArray = [{
    "Name": "Joe",
    "Type": "Contractor",
    "Address": "Address 1",
    "Email": "Email@email.com",
    "Mobile": "0123456789",
    "Location": "At home"
  },
  {
    "Name": "Jane",
    "Type": "Contractor",
    "Address": "Address 2",
    "Email": "Email@email.com",
    "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;
}

#table1trtd {
  border: 1px solid black;
}
.hide  { display:none; }

<divid="result"class="hide"><tableid="table1"><thead><tr><th>Name</th><th>Type</th><th>Address</th><th>Email</th><th>Mobile</th><th>Location</th></tr></thead><tbodyid="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>`);
})

Solution 2:

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_1@email.com", Mobile: "0123456789", Location: "At home"} 
  , { Name: "Jane", Type: "Contractor", Address: "Address 2", Email: "Email_2@email.com", Mobile: "0987654321", Location: "someWhere"} 
  ] 
;
dataArray.forEach(item=>
  {
  let newRow = myTable.insertRow()
  rowList.forEach(rowName=>newRow.insertCell().textContent = item[rowName.key])
  })

// make header part at lastlet 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;
}

<divid="result"></div>

Solution 3:

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>