JavaScript - Combining nested arrays of JSON data into a single object

Question

JavaScript - Combining nested arrays of JSON data into a single object

I'm looking to convert a nested JSON structure into a single object with dynamic keys. I attempted the code below, which only works for one level. I need help writing a recursive function to handle n levels of nesting. Any advice would be appreciated.

   data.map((e) => {
   for (let key in e) {
     if (typeof e[key] === "object") {
       for (let onLevel in e[key]) {
         e[key + "." + onLevel] = e[key][onLevel];
       }
     }
   }
 });

Example

Input JSON

[{
  "Id": "0hb3L00000000jkQAA",
  "Name": "P-2797",
  "ContactEncounterId": "0ha3L000000001qQAA",
  "StartTime": "2020-06-27T11:00:00.000Z",
  "EncounterDuration": 25,
  "ContactEncounter": {
    "Name": "Grocery Shopping 17",
    "LocationId": "1313L0000004ENlQAM",
    "Id": "0ha3L000000001qQAA",
    "Location": {
      "Name": "Waitrose",
      "LocationType": "Site",
      "Id": "1313L0000004ENlQAM"
    }
  }
}]

Output JSON

[{
  "Id": "0hb3L00000000jkQAA",
  "Name": "P-2797",
  "ContactEncounterId": "0ha3L000000001qQAA",
  "StartTime": "2020-06-27T11:00:00.000Z",
  "EncounterDuration": 25,
  "ContactEncounter.Name": "Grocery Shopping 17",
  "ContactEncounter.LocationId": "1313L0000004ENlQAM",
  "ContactEncounter.Id": "0ha3L000000001qQAA",
  "ContactEncounter.Location.Name": "Waitrose",
  "ContactEncounter.Location.LocationType": "Site",
  "ContactEncounter.Location.Id": "1313L0000004ENlQAM"
}]

javascript json

Answer 1

Answer №1

To delve deeper into the object, a recursion must be created to track the path being taken.

One way to solve this is:

const input = [{
        "Id": "0hb3L00000000jkQAA",
        "Name": "P-2797",
        "ContactEncounterId": "0ha3L000000001qQAA",
        "StartTime": "2020-06-27T11:00:00.000Z",
        "EncounterDuration": 25,
        "ContactEncounter": {
            "Name": "Grocery Shopping 17",
            "LocationId": "1313L0000004ENlQAM",
            "Id": "0ha3L000000001qQAA",
            "Location": {
                "Name": "Waitrose",
                "LocationType": "Site",
                "Id": "1313L0000004ENlQAM"
            }
        }
    }
];

function merge( source, target = {}, ...parents) {
  for (let [key, value] of Object.entries( source ) ) {
    const path = (parents || []).concat( key );
    if (typeof value === 'object') {
      merge( value, target, ...path );
      continue;
    }
    target[path.join('.')] = value;
  }
  return target;
}

console.log( merge( input[0] ) );

Alternatively, you can use Object.assign to assign results of the deeper search into your current object:

const input = [{
        "Id": "0hb3L00000000jkQAA",
        "Name": "P-2797",
        "ContactEncounterId": "0ha3L000000001qQAA",
        "StartTime": "2020-06-27T11:00:00.000Z",
        "EncounterDuration": 25,
        "ContactEncounter": {
            "Name": "Grocery Shopping 17",
            "LocationId": "1313L0000004ENlQAM",
            "Id": "0ha3L000000001qQAA",
            "Location": {
                "Name": "Waitrose",
                "LocationType": "Site",
                "Id": "1313L0000004ENlQAM"
            }
        }
    }
];

function merge( source, ...parents) {
  const mergedValue = {};
  for (let [key, value] of Object.entries( source ) ) {
    const path = (parents || []).concat( key );
    if (typeof value === 'object') {
      Object.assign( mergedValue, merge( value, ...path ) );
      continue;
    }
    mergedValue[path.join('.')] = value;
  }
  return mergedValue;
}

console.log( merge( input[0] ) );

Answer 2

To delve deeper into the object, a recursion must be created to track the path being taken.

One way to solve this is:

const input = [{
        "Id": "0hb3L00000000jkQAA",
        "Name": "P-2797",
        "ContactEncounterId": "0ha3L000000001qQAA",
        "StartTime": "2020-06-27T11:00:00.000Z",
        "EncounterDuration": 25,
        "ContactEncounter": {
            "Name": "Grocery Shopping 17",
            "LocationId": "1313L0000004ENlQAM",
            "Id": "0ha3L000000001qQAA",
            "Location": {
                "Name": "Waitrose",
                "LocationType": "Site",
                "Id": "1313L0000004ENlQAM"
            }
        }
    }
];

function merge( source, target = {}, ...parents) {
  for (let [key, value] of Object.entries( source ) ) {
    const path = (parents || []).concat( key );
    if (typeof value === 'object') {
      merge( value, target, ...path );
      continue;
    }
    target[path.join('.')] = value;
  }
  return target;
}

console.log( merge( input[0] ) );

Alternatively, you can use Object.assign to assign results of the deeper search into your current object:

const input = [{
        "Id": "0hb3L00000000jkQAA",
        "Name": "P-2797",
        "ContactEncounterId": "0ha3L000000001qQAA",
        "StartTime": "2020-06-27T11:00:00.000Z",
        "EncounterDuration": 25,
        "ContactEncounter": {
            "Name": "Grocery Shopping 17",
            "LocationId": "1313L0000004ENlQAM",
            "Id": "0ha3L000000001qQAA",
            "Location": {
                "Name": "Waitrose",
                "LocationType": "Site",
                "Id": "1313L0000004ENlQAM"
            }
        }
    }
];

function merge( source, ...parents) {
  const mergedValue = {};
  for (let [key, value] of Object.entries( source ) ) {
    const path = (parents || []).concat( key );
    if (typeof value === 'object') {
      Object.assign( mergedValue, merge( value, ...path ) );
      continue;
    }
    mergedValue[path.join('.')] = value;
  }
  return mergedValue;
}

console.log( merge( input[0] ) );

Answer 3

Answer №2

Exploring a different strategy involves utilizing the second parameter and passing the key when searching for an object at a specific level.

const obj = {
  "Id": "0hb3L00000000jkQAA",
  "Name": "P-2797",
  "ContactEncounterId": "0ha3L000000001qQAA",
  "StartTime": "2020-06-27T11:00:00.000Z",
  "EncounterDuration": 25,
  "ContactEncounter": {
    "Name": "Grocery Shopping 17",
    "LocationId": "1313L0000004ENlQAM",
    "Id": "0ha3L000000001qQAA",
    "Location": {
      "Name": "Waitrose",
      "LocationType": "Site",
      "Id": "1313L0000004ENlQAM"
    }
  }
}


function flattenObj(obj, param) {
  let newObj = {};
  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      newObj = { ...newObj,
        ...flattenObj(obj[key], key + '.')
      }
    } else {
      newObj[param + key] = obj[key]
    }
  }
  return newObj;
}


console.log(flattenObj(obj, ''))

Answer 4

Exploring a different strategy involves utilizing the second parameter and passing the key when searching for an object at a specific level.

const obj = {
  "Id": "0hb3L00000000jkQAA",
  "Name": "P-2797",
  "ContactEncounterId": "0ha3L000000001qQAA",
  "StartTime": "2020-06-27T11:00:00.000Z",
  "EncounterDuration": 25,
  "ContactEncounter": {
    "Name": "Grocery Shopping 17",
    "LocationId": "1313L0000004ENlQAM",
    "Id": "0ha3L000000001qQAA",
    "Location": {
      "Name": "Waitrose",
      "LocationType": "Site",
      "Id": "1313L0000004ENlQAM"
    }
  }
}


function flattenObj(obj, param) {
  let newObj = {};
  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      newObj = { ...newObj,
        ...flattenObj(obj[key], key + '.')
      }
    } else {
      newObj[param + key] = obj[key]
    }
  }
  return newObj;
}


console.log(flattenObj(obj, ''))

JavaScript - Combining nested arrays of JSON data into a single object

Answer №1

Answer №2

Similar questions

Which is better for your website: SSG vs SSR?

Exporting JavaScript formatting in Netbeans is a breeze

Is it possible for a property to be null or undefined on class instances?

Using Node.js to serialize JSON POST data as an array

Issue with Webpack throwing 'window undefined' persists despite using the 'use client' configuration in React/Next.js

The specified class is not found in the type 'ILineOptions' for fabricjs

Recreating a <select> element and verifying it once more using JS/HTML5

The DELETE function in express.js with MySQL integration is encountering a problem where it is unable to

Error in NodeJS session: the variable "request" is not defined

Encountering difficulties in compiling Dynamic HTML with the $compile function

Is there a way to access an HTML element using Vue's methods?

Organizing data in a database the arrangement way

Python Mechanize file uploading capabilities

The comparison between local variables and data can result in a significant drop in performance

Endlessly triggering document.execCommand, the JavaScript selectionchange-EventListener seems to have a mind of

I'm encountering an issue in my server.js file where I am unable to read the property 'collection' as it is undefined

Troubleshooting data binding problems when using an Array of Objects in MatTableDataSource within Angular

Struggling to click on a dynamic link before it times out

Struggling with TypeScript errors due to React.HTMLProps for HTMLAnchorElement

Prevent mobile view from activating when zoomed in on the screen