Визуализация вложенных объектов JSON в электронной таблице

Question

Я пытаюсь визуализировать вложенный объект JSON в электронной таблице, в частности в Google Sheets. Я использую инструмент «Редактор сценариев» в своем Листе Google, чтобы написать свой код и электронную таблицу для вывода данных.

Я потратил около 3 дней на это и не могу понять, как правильно структурировать данные. Он начинает работать правильно, но быстро передается по мере прохождения кода дальше в объект JSON. У меня нет контроля над структурой объекта JSON.

Из-за его размера я не буду публиковать здесь фактический объект JSON, но его можно просмотреть в одном из файлов в моем Google Sheet. Вот рекурсивная функция, с которой я столкнулся, чтобы пройти через этот объект и записать данные в Google Sheet:

function createVisualization(data) {
  var sheet   = SpreadsheetApp.getActiveSheet();
  var rowArr  = [];
  var counter = 0;

  function looper(data) {

    var object = data.children;
    object.forEach(function(obj, index) {

      var name        = obj.name;
      var numChildren = obj.children.length;

      rowArr.push(name);

      counter = (counter - index) + 1;

      if(numChildren > 0) { // has nested child

        looper(obj);

      } else { // no child

        counter--;

        sheet.appendRow(rowArr);

        rowArr = [];

        for(var i = 0; i < counter -1; i++) {
          rowArr.push('');
        }

      }

    });

  }

  looper(data);
}

Пример данных:

function getData() {
  return {
    "additionalParam": "value",
    "data": {
      "children": [
        {
          "name": "Purple",
          "children": [
            {
              "name": "Green",
              "children": [
                {
                  "name": "Pink",
                  "children": [],
                  "additionalParam": "value",
                  "additionalParam": "value",
                  "additionalParam": "value",
                  "additionalParam": "value"
                }
              ],
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value"
            },
            {
              "name": "Violet",
              "children": [
                {
                  "name": "Indigo",
                  "children": [
                    {
                      "name": "Chartreuse",
                      "children": [
                        {
                          "name": "Yellow",
                          "children": [
                            {
                              "name": "Red",
                              "children": [
                                {
                                  "name": "Blue",
                                  "children": [
                                    {
                                      "name": "Orange",
                                      "children": [
                                        {
                                          "name": "Turquoise",
                                          "children": [],
                                          "additionalParam": "value",
                                          "additionalParam": "value",
                                          "additionalParam": "value",
                                          "additionalParam": "value"
                                        }
                                      ],
                                      "additionalParam": "value",
                                      "additionalParam": "value",
                                      "additionalParam": "value",
                                      "additionalParam": "value"
                                    }
                                  ],
                                  "additionalParam": "value",
                                  "additionalParam": "value",
                                  "additionalParam": "value",
                                  "additionalParam": "value"
                                }
                              ],
                              "additionalParam": "value",
                              "additionalParam": "value",
                              "additionalParam": "value",
                              "additionalParam": "value"
                            }
                          ],
                          "additionalParam": "value",
                          "additionalParam": "value",
                          "additionalParam": "value",
                          "additionalParam": "value"
                        }
                      ],
                      "additionalParam": "value",
                      "additionalParam": "value",
                      "additionalParam": "value",
                      "additionalParam": "value"
                    }
                  ],
                  "additionalParam": "value",
                  "additionalParam": "value",
                  "additionalParam": "value",
                  "additionalParam": "value"
                }
              ],
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value"
            },
            {
              "name": "Crimson",
              "children": [
                {
                  "name": "Rose",
                  "children": [],
                  "additionalParam": "value",
                  "additionalParam": "value",
                  "additionalParam": "value",
                  "additionalParam": "value"
                }
              ],
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value"
            }
          ],
          "additionalParam": "value",
          "additionalParam": "value",
          "additionalParam": "value",
          "additionalParam": "value"
        },
        {
          "name": "Amethyst",
          "children": [
            {
              "name": "Silver",
              "children": [],
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value",
              "additionalParam": "value"
            }
          ],
          "additionalParam": "value",
          "additionalParam": "value",
          "additionalParam": "value",
          "additionalParam": "value"
        },
        {
          "name": "Gold",
          "children": [],
          "additionalParam": "value",
          "additionalParam": "value",
          "additionalParam": "value",
          "additionalParam": "value"
        }
      ],
      "additionalParam": "value",
      "additionalParam": "value",
      "additionalParam": "value",
      "additionalParam": "value"
    },
    "additionalParam": "value",
    "additionalParam": "value",
    "additionalParam": "value"
  }
}

Вы заметите, что я пытаюсь записать каждую строку таблицы в файл (отсюда и специфический синтаксис Google Sheet), но если есть лучший способ сделать это, я открыт для этого.

Я также создал Google Sheet, к которому любой может получить доступ к , чтобы увидеть мой полный код и работать с тем, что у меня есть. Чтобы получить доступ к Редактору сценариев, зайдите в Инструменты> Редактор сценариев, и вы увидите мои файлы.

Это то, на что, я надеюсь, будут выглядеть данные после завершения:

Вы можете видеть, что каждый дочерний объект находится в одном столбце справа от его родителя. Итак, мы можем видеть, что Фиолетовый является родителем Зеленого, Фиолетового и Малинового, Фиолетовый является родителем Индиго, Алый является родителем Розы и т. Д.

Основная проблема, с которой я сталкиваюсь, заключается в том, как отслеживать количество пустых ячеек, которые мне нужно добавить, чтобы данные располагались в нужном месте в электронной таблице. Проходить глубже в объект JSON легко, но как только функция отступает на несколько уровней, мне становится трудно понять, где находится объект JSON, в котором я нахожусь. Я понимаю, что это сложно, и я старался держать это коротким, поэтому задавайте мне уточняющие вопросы, если я что-то пропустил.

Answer 1

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

var data = {"children":[{"name":"Purple","children":[{"name":"Green","children":[{"name":"Pink","children":[]}]},{"name":"Violet","children":[{"name":"Indigo","children":[{"name":"Chartre","children":[{"name":"Yellow","children":[{"name":"Red","children":[{"name":"Blue","children":[{"name":"Orange","children":[{"name":"Turquoise","children":[]}]}]}]}]}]}]}]},{"name":"Crimson","children":[{"name":"Rose","children":[]}]}]},{"name":"Amethys","children":[{"name":"Silver","children":[]}]},{"name":"Gold","children":[]}]};

var rows = [];      // used just for the demo and not needed in your script
var rowArr  = [];
var counter = 0;

function looper(data) { 
  data.children.forEach(function(obj, index) { 
    while (rowArr.length < counter)
      rowArr.push('');

    rowArr.push(obj.name);

    counter++;
    looper(obj);
    counter--;

    if (rowArr.length > 0) { 
      rows.push(rowArr); // replace with sheet.appendRow(rowArr);
      rowArr = [];
    }
  });
}
looper(data); 

for (var row of rows) console.log( row.join('\t') ); 

Альтернативой является использование его в качестве параметра function looper(data, counter) { и передача увеличенного счетчика looper(obj, counter + 1);