CODEWITHSUNDEEP
javascripthtml
Mathew Pius
Mathew Pius

Reputation: 65

adding elements to the row of a table in html from a javascript object

i have a table into which i need to add rows by counting the number of elements i have in my object in javascript.I have an object that has normal keys and an array of values.

     userobject={    
                 ID: [1,2,3]
                 IP_Address: ["12.21.12.321","52.23.12.312","12.32.12.321"]
                 Server_Name: ["test1","test2","test3"]}

This is how my object looks like.I need to add each element in the array into a column on each row in the table. How can i automatically generate this.

ID|  IP ADDRESS |SERVERNAME|
1 | 12.21.12.321|   test1  |
2 | 52.23.12.312|   test2  |
3 | 12.32.12.321|   test3  |

and so on. Data needs to be inserted from the array of values into each row.I have already created the table header i.e.column names. i just need help to insert each value one by one into each row.And also if a person wants to delete a row
a row has to be deleted based on the number of elements in the array.

Can someone please help me!?

Upvotes: 0

Views: 897

Answers (2)

Andre Nuechter
Andre Nuechter

Reputation: 2255

You can automatically generate table-rows by iterating over the data and including the items at the respective indices. To delete a row, you can add a button that deletes its closest row. Here's an example:

const userobject = {
  ID: [1,2,3],
  IP_Address: ["12.21.12.321","52.23.12.312","12.32.12.321"],
  Server_Name: ["test1","test2","test3"]
};
const [table] = document.getElementsByTagName('table');
const deleteHandler = ({ target }) => target.closest('tr').remove();
const btnTmpl = document.createElement('button');
btnTmpl.textContent = 'delete';

userobject.ID.forEach((id, i) => {
  const tr = table.insertRow();
  const btn = btnTmpl.cloneNode(true);  
  btn.onclick = deleteHandler;  
  tr.insertCell().textContent = id;
  tr.insertCell().textContent = userobject.IP_Address[i];
  tr.insertCell().textContent = userobject.Server_Name[i];
  tr.insertCell().append(btn);
  table.append(tr);
});
table {
border-collapse: collapse;
}

td, th {
border: 1px solid black;
}
<table>
<theader><tr><th>ID</th><th>IP</th><th>Server</th></tr></theader>
</table>

Upvotes: 1

Cedric Cholley
Cedric Cholley

Reputation: 2043

Here is a code proposition, I hope you can adapt it to your need

const header = document.getElementById('header');
const tbody = document.getElementById('tbody');

const userobject = {
  ID: [1, 2, 3],
  IP_Address: ["12.21.12.321", "52.23.12.312", "12.32.12.321"],
  Server_Name: ["test1", "test2", "test3"],
};


Object.keys(userobject).forEach(key => {
  header.innerHTML += `<th>${key}</th>`;
});

for (let i = 0, c = userobject.ID.length; i < c; i++) {
  const tr = document.createElement('tr');
  Object.values(userobject).forEach(array => {
    tr.innerHTML += `<td>${array[i]}</td>`;
  });

  tbody.append(tr);
}
<table>
  <thead>
    <tr id="header"></tr>
  </thead>
  <tbody id="tbody"></tbody>
</table>

Upvotes: 0

Related Questions