0

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;
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
avi
  • 31
  • 2
  • 5
  • 1
    I made you a snippet. Please add relevant data and HTML for a [mcve] – mplungjan May 20 '20 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](https://stackoverflow.com/q/584751/215552) – Heretic Monkey May 20 '20 at 13:11
  • Does this answer your question? [display array of objects in a dynamic table javascript](https://stackoverflow.com/questions/29335369/display-array-of-objects-in-a-dynamic-table-javascript) – Heretic Monkey May 20 '20 at 13:13

3 Answers3

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

#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>`);
})
mplungjan
  • 169,008
  • 28
  • 173
  • 236
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_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 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>
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
  • 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 – mplungjan May 20 '20 at 13:43
  • @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) – Mister Jojo May 20 '20 at 14:06
-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>
Emir Tanır
  • 42
  • 7