如何以可逆的方式将任意嵌套的 object 转换为表格结构？

Question

给定一个任意深度的嵌套 object 其结构直到运行时才知道，例如

    {
      "row-0" : {
        "rec-0" : {
          "date" : 20220121,
          "tags" : [ "val-0" ]
        },
        "rec-1" : {
          "date" : 20220116,
          "url" : "https://example.com/a",
          "tags" : [ "val-0", "val-1" ]
        }
      },
      "row-1" : {
        "rec-0" : {
          "date" : 20220116,
          "url" : "https://example.com/b"
        }
      }
    }

我想要一个工具/程序将其可逆地转换为表格（2D）结构，例如

    {
      "row-0" : {
        "['rec-0']['date']" : 20220121,
        "['rec-0']['tags'][0]" : "val-0",
        "['rec-1']['date']" : 20220116,
        "['rec-1']['url']" : "https://example.com/a",
        "['rec-1']['tags'][0]" : "val-0",
        "['rec-1']['tags'][1]" : "val-1"
        },
      "row-1" : {
        "['rec-0']['date']" : 20220116,
        "['rec-0']['url'']" : "https://example.com/b"       
      }
    }

这种格式可以导出为 CSV 并随后使用电子表格应用程序进行编辑。 原始嵌套 object 的路径编码在键（列标题）中，例如"['rec-0']['date']"和"['rec-0']['tags'][0]"以方便逆向转换。

实现这一目标的最佳方法是什么？

Answer 1

您可以使用简单的递归 function 来完成它，它生成嵌套的键名和结束值并将其填充到数组中。

Object.entries在解决方案中很方便，因为它可以分别使用index或key迭代array或object 。

 const data = { "row-0": { "rec-0": { date: 20220121, tags: ["val-0"], }, "rec-1": { date: 20220116, url: "https://example.com/a", tags: ["val-0", "val-1"], }, }, "row-1": { "rec-0": { date: 20220116, url: "https://example.com/b", }, }, }; const generateNestedKeyNameAndValue = (input, nestedKeyName, keyValueArr) => { if (typeof input === "object") { // array or object - iterate over them const quoteString = Array.isArray(input)? "": "'"; Object.entries(input).forEach(([key, value]) => { generateNestedKeyNameAndValue( value, // extend the key name `${nestedKeyName}[${quoteString}${key}${quoteString}]`, keyValueArr ); }); } else { // string or number (end value) keyValueArr.push([nestedKeyName, input]); } }; const output = Object.fromEntries( Object.entries(data).map(([key, value]) => { const generatedKeyValuePairs = []; generateNestedKeyNameAndValue(value, "", generatedKeyValuePairs); return [key, Object.fromEntries(generatedKeyValuePairs)]; }) ); console.log(output);

Answer 2

使用Array.map()迭代当前条目。 根据规则生成路径（参见preparePath函数）。 对于每个值，检查它是否是 object（或数组）。 如果它是添加它的路径的关键。 如果不是，则返回{ [path]: val } object。 通过扩展到Object.assing()来展平所有对象。

 // prepare the key from the current key, isArray(obj), and the previous path const preparePath = (key, obj, path = []) => [...path, `[${Array.isArray(obj)? key: `'${key}'`}]` ] // convert all sub objects to a single object const fn = (obj, path) => Object.assign({}, ...Object.entries(obj).map(([key, val]) => typeof val === 'object' // if the value is an object? fn(val, preparePath(key, obj, path)) // iterate it and it to current path: { [preparePath(key, obj, path).join('')]: val } // if the val is not an object, create an object of { [path]: val } )) const data = {"row-0":{"rec-0":{"date":20220121,"tags":["val-0"]},"rec-1":{"date":20220116,"url":"https://example.com/a","tags":["val-0","val-1"]}},"row-1":{"rec-0":{"date":20220116,"url":"https://example.com/b"}}} // iterate the 1st level of the object since and flatten each sub object const result = Object.fromEntries( Object.entries(data).map(([k, v]) => [k, fn(v)]) ) console.log(result)