What is the best method to consistently convert a deeply nested object into a tabular format that can be easily reversed

Question

What is the best method to consistently convert a deeply nested object into a tabular format that can be easily reversed

Imagine having a deeply nested object with an unknown structure until runtime, like:

    {
      "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"
        }
      }
    }

I am seeking a tool or program that can transform this into a tabular (2D) format such as:

    {
      "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"       
      }
    }

This conversion allows for easy exporting as CSV and editing in a spreadsheet application. The keys represent the paths of the original nested object to aid in undoing the transformation.

What would be the most effective way to accomplish this task?

javascript json ecmascript-6

Answer 1

Answer №1

To achieve this, you can utilize a straightforward recursive function that constructs a nested key name and corresponding value, then stores it within an array.

The use of Object.entries becomes essential in this approach as it allows for iterating through either an array or an object, employing the index or key accordingly.

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") {
    // Iterate over arrays or objects
    const quoteString = Array.isArray(input) ? "" : "'";
    Object.entries(input).forEach(([key, value]) => {
      generateNestedKeyNameAndValue(
        value,
        // Extend the key name 
        `${nestedKeyName}[${quoteString}${key}${quoteString}]`,
        keyValueArr
      );
    });
  } else {
    // Capture 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

To achieve this, you can utilize a straightforward recursive function that constructs a nested key name and corresponding value, then stores it within an array.

The use of Object.entries becomes essential in this approach as it allows for iterating through either an array or an object, employing the index or key accordingly.

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") {
    // Iterate over arrays or objects
    const quoteString = Array.isArray(input) ? "" : "'";
    Object.entries(input).forEach(([key, value]) => {
      generateNestedKeyNameAndValue(
        value,
        // Extend the key name 
        `${nestedKeyName}[${quoteString}${key}${quoteString}]`,
        keyValueArr
      );
    });
  } else {
    // Capture 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 3

Answer №2

Traverse through the existing entries by utilizing Array.map(). Formulate the path based on specific rules (refer to the preparePath function). For every value, determine if it is an object (or array). If so, append its keys to the path. Otherwise, return a { [path]: val } structure. Merge all objects by using Object.assign().

// derive the key from the present key, isArray(obj), and the previous path
const preparePath = (key, obj, path = []) => [
  ...path, 
  `[${Array.isArray(obj) ? key : '\'${key}\''}]`
]

// transform all sub objects into a unified 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 through it and add to the current path
    : { [preparePath(key, obj, path).join('')]: val } // if the value is not an object, create an object with { [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 over the top-level of the object and flatten each sub object
const result = Object.fromEntries(
  Object.entries(data).map(([k, v]) => [k, fn(v)])
)

console.log(result)

Answer 4

Traverse through the existing entries by utilizing Array.map(). Formulate the path based on specific rules (refer to the preparePath function). For every value, determine if it is an object (or array). If so, append its keys to the path. Otherwise, return a { [path]: val } structure. Merge all objects by using Object.assign().

// derive the key from the present key, isArray(obj), and the previous path
const preparePath = (key, obj, path = []) => [
  ...path, 
  `[${Array.isArray(obj) ? key : '\'${key}\''}]`
]

// transform all sub objects into a unified 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 through it and add to the current path
    : { [preparePath(key, obj, path).join('')]: val } // if the value is not an object, create an object with { [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 over the top-level of the object and flatten each sub object
const result = Object.fromEntries(
  Object.entries(data).map(([k, v]) => [k, fn(v)])
)

console.log(result)

What is the best method to consistently convert a deeply nested object into a tabular format that can be easily reversed

Answer №1

Answer №2

Similar questions

Having trouble displaying a table accurately in React

V5 Modal & jQuery: troubleshooting the spinner problem during loading of content

Govern Your Gateway with Expressive Logs

Registration process in Node Express application encounters persistent loading when accessed through Postman

Is it possible to recreate the initial JavaScript source file using a minified version alongside its associated source-map file?

Extracting information from multiple JSON arrays in C#

Restrict the height of posts created in the summernote editor

Streaming the request body in NodeJS using ExpressJS without buffering

Utilize recursive and for loop methods for parsing JSON efficiently

What is the best way to separate a table column into a distinct column at the specified delimiter count?

Is it normal for the protractor cucumber tests to pass without observing any browser interactions taking place?

Navigating with Anchors, Styling and jQuery

The res.sendFile() function quickly delivers a 204 no content response

Iterating through JSON arrays using Newtonsoft in C#

Retrieving the value of an array from a JSON data structure

Python: "Converting a boolean value to a JSON string with quotes"

Adjusting the URL variable based on the selected checkbox option

The Shopify JSON array is displaying some results, however, there are also empty results being

Always display all options in MUI Autocomplete without any filtering

Utilizing jQuery to dynamically update background colors within an ASP repeater based on the selected value of a dropdown list