массивы вложенных объектов в табуляторе

Question

Я пытаюсь заставить массивы вложенных объектов работать с табулятором.

Это структура данных json:

[
      {
        "id": 1,
        "name": "Test 01",
        "books": [
          {
            "number": "0254",
            "details": [
              {
                "var1": "Testdata",
                "var2": "XXX"
              }
            ],
            "detail02": [
              {
                "name": "Data 01",
                "value": "5645"
              },
              {
                "name": "Data 02",
                "value": "5125"
              },
            ]
          }
        ]
      }
]

Обычно я могу просто установить данные через табулятор вот так:

columns:[
{title:"Number", field:"id"},
{title:"Name", field:"name"},
{title:"Books Number", field:"books.number"}
],

Но books.number не работает. Кто-нибудь может подсказать, как с этим бороться?

Answer 1

Я думаю, что выпуск книг как массив, пожалуйста, сделайте книги Объект, он будет работать

var tabledata = [{
  "id": 1,
  "name": "Test 01",
  "books": {
    "number": "0254",
    "details": [{
      "var1": "Testdata",
      "var2": "XXX"
    }],
    "detail02": [{
        "name": "Data 01",
        "value": "5645"
      },
      {
        "name": "Data 02",
        "value": "5125"
      },
    ]
  }
}];

var table = new Tabulator("#example-table", {
  data: tabledata,
  layout:"fitColumns",
  columns: [{
      title: "Number",
      field: "id"
    },
    {
      title: "Name",
      field: "name"
    },
    {
      title: "Books Number",
      field: "books.number"
    }
  ],
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.min.js"></script>
<div id="example-table"></div>

Answer 2

Я пытаюсь другой подход. Табулятор получил функцию для получения данных из обычной таблицы html.

Сейчас я занят заполнением таблицы рекурсивной функцией. Проблема в том, что <th> печатаются для каждого объекта, а не только один раз. Также мне не удалось вставить все данные из одного объекта в tr.

Вот что я получил в данный момент:

var table = document.createElement("table");
table.setAttribute('id', 'example-table');
var tr = table.insertRow(-1);

function printValues(obj) {
    for(var k in obj) {
        if(obj[k] instanceof Object) {
            var th = document.createElement("th");
            th.textContent = Object.keys(obj[k]);
            tr.appendChild(th);
            printValues(obj[k]);
        } else {
            var data_row = table.insertRow(-1);
            var tabCell = data_row.insertCell(-1);
            tabCell.textContent = obj[k];
        }
    }
};
printValues(json);

var divContainer = document.getElementById("table-holder");
divContainer.innerHTML = "";
divContainer.appendChild(table);