display data in html table from json file

Posted by Klbaiju under ASP.NET MVC on 4/16/2018 | Points: 10 | Views : 3041 | Status : [Member] | Replies : 0
Hi,

I want to display data from json in html table

following is my working code

<div id="showData"></div>
<div id="disp"></div>
<script type="text/javascript" language="javascrit">


var myBooks = [{ "Id": 14, "FirstName": "kiran", "LastName": "Kumar", "Company": "HCL" }, { "Id": 15, "FirstName": "Satya", "LastName": "kumar", "Company": "TCS" }, { "Id": 17, "FirstName": "Sarin", "LastName": "Hasin", "Company": "BBC" }, { "Id": 18, "FirstName": "jkjkjk", "LastName": "jkjkjk", "Company": "hhh" }, { "Id": 19, "FirstName": "hhjh", "LastName": "jhjhjh", "Company": "hkkkll" }]


var col = [];
for (var i = 0; i < myBooks.length+1; i++) {
for (var key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);

}

}

if(i=myBooks.length)
{
col.push("Edit");
}
if(i=myBooks.length+1)
{
col.push("Delete");
}

}

// CREATE DYNAMIC TABLE.
var table = document.createElement("table");

// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

var tr = table.insertRow(-1); // TABLE ROW.

for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}


for (var i = 0; i < myBooks.length; i++) {

tr = table.insertRow(-1);

for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];



}

if (j=col.length)
{

tabCell.innerHTML="<input type='button' id='btn2' value='delete'/>";

}
if (j=col.length+1)
{

tabCell.innerHTML="<input type='button' id='btn1' value='Edit'/>";
}
}

// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);

</script>

table headers are Id,Firstname,LastName,company,Edit,Delete

Id,Firstname,LastName,company are from json table

and I added edit and delete in header

my requirement is to add delete and edit button in every row

But my code displays edit button under delete header

and under edit header there is no edit button is displaying there is a text undefined under delete header

How to solve this


Regards

Baiju




Responses

(No response found.)

Login to post response