Здравствуйте, мне нужно заполнить таблицу из массива JSON объектов. Я написал фрагмент кода который создаёт ячейки и заполняет их, но проблема в том, что я не могу добраться до свойств вложенных объектов.
//Объект
var user = {
name: "John",
age: 25,
male: true,
size: {
top: 90,
middle: 60
},
location: {
country: "USA",
land: 1
}
};
var userArray = [];
//Создаём массив JSON
for (var i = 0; i < 10; ++i) {
++user.age;
--user.size.top;
user.location.land += 2;
userArray[i] = JSON.stringify(user);
}
// Это количество строк
var rows = 10;
// Это количество ячеек в строке (количество столбцов)
var cells = 7;
// Получить ссылку на body
var body = document.getElementsByTagName("body")[0];
// Создать элемент <table> и элемент <tbody>
var table = document.getElementById("table");
var tableBody = document.createElement("tbody");
// Создать все ячейки
for (var i = 0; i < rows; i++) {
// Создать строку
var row = document.createElement("tr");
// Сортировка по возрастанию
var tmp = JSON.parse(userArray[i]);
for (var key in tmp) {
var cell = document.createElement("td");
var cellText = document.createTextNode(tmp[key]);
cell.appendChild(cellText);
row.appendChild(cell);
}
// Добавить строку в конец элемента tbody
tableBody.appendChild(row);
}
// Поместить <tbody> внуть <table>
table.appendChild(tableBody);
// Добавить <table> внутрь <body>
body.appendChild(table);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table id="table" border="1">
<thead>
<tr>
<th data-type="name" style="cursor: pointer">name</th>
<th data-type="age" style="cursor: pointer">age</th>
<th data-type="male" style="cursor: pointer">male</th>
<th data-type="top" style="cursor: pointer">top</th>
<th data-type="middle" style="cursor: pointer">middle</th>
<th data-type="country" style="cursor: pointer">country</th>
<th data-type="land" style="cursor: pointer">land</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="1.js"></script>
</body>
</html>