Read json and create table javascript

Question

I am am trying to read json data and import it to my table in html. But some how it is not working.

I have already implemented a function to type in data what works great.

Only the function to load the json data is not working.

But i really don't know why.

I have posted the whole html code and my load data function. MY Javascript code:

function loadData() {

var text = '{"employees":[' +
'{"firstName":"Ben","lastName":"dsafsad" },' +
'{"firstName":"Peter","lastName":"dsdsaadsj" },' +
'{"firstName":"Jules","lastName":"MIAU" }]}';

obj = JSON.parse(text);

for (var i = 0; i < obj.length; i++) {     
var currentObj = obj[i];
var myName = currentObj.employees[0].firstName;
var age = currentObj.employees[0].lastName;
var table = document.getElementById("myTableData");

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;

}
}

MY HTML code:

<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
    <td>Name:</td>
    <td><input type="text" id="name"></td>
</tr>
<tr>
    <td>Age:</td>
    <td><input type="text" id="age">
    <input type="button" id="add" value="Add" onclick="Javascript:addRow()">
    <input type="button" id="add" value="Load Data" onclick="Javascript:loadData()"></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</div>
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData"  border="1" cellpadding="2">
<tr>
    <td>&nbsp;</td>
    <td><b>Name</b></td>
    <td><b>Age</b></td>
</tr>
</table>
&nbsp;<br/>
</div>
</body>
</html>

this doesn't make sense: for (var i = 0; i < json.length; i++) { var currentObj = json[i];. Your json is in a variable called text which is then parsed to an object called obj. What is json? — devlin carnate
– devlin carnate, Commented Jan 19, 2016 at 23:29
@devlincarnate yes you are right it should be obj.length it was a part of my old code sorry. but still it is not working but i don't know why maybe you have an idear ? — Ben
– Ben, Commented Jan 19, 2016 at 23:37
What is the value property of a string value supposed to mean? After conversion of the string to a String object is will be undefined because there is no such property, — traktor
– traktor, Commented Jan 19, 2016 at 23:42
I made some changes in the code but still have the same error. What do you mean with the conversion of the string to a string ? — Ben
– Ben, Commented Jan 19, 2016 at 23:48
You have mentioned an error in comments, but I don't see the error in the question? — Heretic Monkey
– Heretic Monkey, Commented Jan 19, 2016 at 23:53

devlin carnate · Accepted Answer · 2016-01-20 00:02:30Z

You should be iterating over obj.employees, not obj. You have one object, which is composed of an employees array (with length of 3 in your example).

  obj = JSON.parse(text);
  console.log(obj);
  console.log(obj.length);  //this returns undefined
  console.log(obj.employees.length); //this is what you want
  for (var i = 0; i < obj.employees.length; i++) {
    var currentObj = obj.employees[i];
    console.log(currentObj);
    var myName = currentObj.firstName;
    console.log(myName);
    var age = currentObj.lastName;
    console.log(age);
  }

Fiddle demo

You also have a problem here:

row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;

myName and age are variables you defined, not html elements, and as such, they don't have a value property. You just need to refer to the variables themselves, like so:

row.insertCell(1).innerHTML= myName;
row.insertCell(2).innerHTML= age;

Update Fiddle Demo

Collectives™ on Stack Overflow

Read json and create table javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related