Как взять свойства вложенного объекта[Javascript]

239
29 апреля 2017, 20:56

Здравствуйте, мне нужно заполнить таблицу из массива 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>

Получается такое:

Answer 1

Для требуемого заполнения строки таблицы можно создать отдельную функцию populateTableRow(), принимающую 2 параметра: собственно данные и элемент строки таблицы. Код фунцкии аналогичен оригинальному коду за исключением того, что если содержимое ячейки является объектом, то функция запускает сама себя (рекурсивно) с 1-м параметром - данным объектом, и тем же 2-м параметром что и вызывающая функция:

var user = { 
  name: 'Женя', 
  age: 25, 
  male: true, 
  size: { top: 90, middle: 60 }, 
  location: { country: 'USSR', land: 1 } 
}; 
 
var userArray = []; 
for (var i = 0; i < 10; ++i) { 
  ++user.age; 
  --user.size.top; 
  user.location.land += 2; 
  userArray[i] = JSON.stringify(user); 
} 
 
function populateTableRow(data, row) { 
  for (var key in data)  { 
    var item = data[key]; 
    if (item && 'object' === typeof item) { 
      populateTableRow(item, row);   
    } 
    else { 
      var cell = document.createElement('td') 
        , cellText = document.createTextNode(item); 
      cell.appendChild(cellText); 
      row.appendChild(cell); 
    } 
  } 
} 
 
var rows = 10 
  , cells = 7 
  , body = document.getElementsByTagName('body')[0] 
  , table = document.getElementById('table') 
  , tableBody = document.createElement('tbody'); 
for (var i = 0; i < rows; i++) { 
  var row = document.createElement('tr') 
    , tmp = JSON.parse(userArray[i]); 
  populateTableRow(tmp, row); 
  tableBody.appendChild(row); 
} 
table.appendChild(tableBody); 
body.appendChild(table);
table th { 
  cursor: pointer; 
}
<table id="table" border="1"> 
  <thead> 
    <tr> 
      <th data-type="name">name</th> 
      <th data-type="age">age</th> 
      <th data-type="male">male</th> 
      <th data-type="top">top</th> 
      <th data-type="middle">middle</th> 
      <th data-type="country">country</th> 
      <th data-type="land">land</th> 
    </tr> 
  </thead> 
  <tbody></tbody> 
</table>

READ ALSO
Vuetify пример таблицы
HTML

Vuetify пример таблицы

Таблица взята из официальной документации vuetify

 684
Не находит картинку
HTML

Не находит картинку

Столкнулся с такой проблемой, не отображается картинка прилагаю скриншот, путь верный

 238
Как создать такие скошенные углы [дубликат]
HTML

Как создать такие скошенные углы [дубликат]

На данный вопрос уже ответили:

 274
XML внутри HTML
HTML

XML внутри HTML

Можно ли внутри html тега вывести каким то образом XML, то есть чтобы браузер не распозновал это как HTML и пытался его вывести а именно как XMLОчень...

 401