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

The error message thrown: "Failed to convert to JSON data type"

AngularJS promises are known for returning the object itself instead of just the resolved value

Axios error in Express middleware - unable to send headers once they have been processed

Using an if-else statement within a Vue event listener

Utilizing AJAX and PHP to create a dynamic like button function

Ways to showcase JSON information that is structured as an Array list

After the "div" tag comes the magic of AJAX, PHP, and JAVASCRIPT, replacing

Issue with Vue/Nuxt 3: Unable to modify properties of null when setting 'textContent'

The tooltip in nvd3 is displaying the index instead of the label

Utilizing Vuetify color variables in combination with ternary operators: A guide

Learn how to toggle the visibility of a gif image with a button click in an ASP.NET application

Decoding JSON data into Enum fields

When using $.getJSON and $.ajax, the expected JSON object is not being returned

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Node.js offers a simple and efficient way to retrieve screen resolution. By using

CSS animations for loading page content

Get access to documents through angular

Trouble with Managing Redirects Following Deletion of Blog Post in a Node.js Express Application

Incorporate Subtitles into Your Website Using JWPlayer

Identifying and capturing changes in child scope events or properties in Angular