可视化电子表格中的嵌套JSON对象

Question

我正在尝试在电子表格（特别是Google表格）中可视化嵌套的JSON对象。我正在Google表格中使用脚本编辑器工具来编写代码，并使用电子表格来输出数据。

我花了大约3天的时间，无法弄清楚如何正确构造数据。它可以正常工作，但是随着代码进一步遍历JSON对象而迅速发展。我无法控制JSON对象的结构。

由于它的大小，我不会在此处发布实际的JSON对象，但是可以在我的Google表格中的文件之一中查看它。这是我想出的递归函数，用于遍历此对象并将数据写入Google表格：

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特定的语法），但是如果有更好的方法可以打开，则可以使用它。

我也created a Google Sheet that anyone can access来查看我的完整代码并使用已有的内容。要访问脚本编辑器，请转到工具>脚本编辑器，您将看到我的文件。

这就是我希望数据完成后的样子：

您可以看到每个子对象在其父对象的右边一列。因此，我们可以看到Purple是Green，Violet和Crimson的父级，Violet是Indigo的父级，Crimson是Rose的父级，等等。

我遇到的主要问题是如何跟踪需要添加的空白单元格的数量，以便数据在电子表格内的正确位置排列。深入到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);