Чтение json и создание таблицы javascript

Я пытаюсь прочитать данные json и импортировать его в таблицу в html. Но некоторые как это не работает.Чтение json и создание таблицы javascript

У меня уже реализована функция ввода данных, что отлично работает.

Только функция загрузки данных json не работает.

Но я действительно не знаю почему.

Я разместил весь код html и функцию загрузки данных. МОЯ код Javascript:

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 код:

<!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>

источник

2016-01-19 Ben

это не имеет смысла: 'для (вар я = 0; я

@devlincarnate да, вы правы, это должно быть obj.length, это было частью моего старого кода, извините. но все же он не работает, но я не знаю, почему, возможно, у вас есть недостаток? – Ben

Что означает значение 'value' значения строки? После того, как преобразование строки в объект String будет неопределенным, потому что такого свойства нет, – traktor53

Вы должны быть итерация над obj.employees, не OBJ. У вас есть один объект, состоящий из массива сотрудников (с длиной 3 в вашем примере).

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

У вас также есть проблема:

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

Myname и возраст является переменными, которые определены, а не HTML элементов, и как таковые, они не имеют свойства значения , Вам просто нужно обратиться к переменным себя, например, так:

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

Update Fiddle Demo

источник

2016-01-19 23:51:53

Чтение json и создание таблицы javascript

ответ

Смежные вопросы