2

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

Получается такое: введите сюда описание изображения

1 ответ 1

2

Для требуемого заполнения строки таблицы можно создать отдельную функцию 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.