Convert a complex nested JSON structure into an array of distinct objects without using indexes

Question

Convert a complex nested JSON structure into an array of distinct objects without using indexes

I am faced with a task of flattening a simple nested object in order to insert it into my database efficiently.

const input = {
  name: "Benny",
  department: {
    section: "Technical",
    branch: {
      timezone: "UTC",
    },
  },
  company: [
    {
      name: "SAP",
      customers: ["Ford-1", "Nestle-1"],
    },
    {
      name: "SAP",
      customers: ["Ford-2", "Nestle-2"],
    },
  ],
};

The required format should include each array value as a separate sub-object stored within an array:

[
  {
    name: "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers": "Ford-1",
  },
  {
    name: "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers": "Nestle-1",
  },
  {
    name: "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers": "Ford-2",
  },
  {
    name: "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers": "Nestle-2",
  },
]

Compared to the undesired result where all fields are stored in a single object with indexes:

{
  name: 'Benny',
  'department.section': 'Technical',
  'department.branch.timezone': 'UTC',
  'company.0.name': 'SAP',
  'company.0.customers.0': 'Ford-1',
  'company.0.customers.1': 'Nestle-1',
  'company.1.name': 'SAP',
  'company.1.customers.0': 'Ford-2',
  'company.1.customers.1': 'Nestle-2'
}

Here is the code snippet I have been working on:

function flatten(obj) {
  let keys = {};
  for (let i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    if (typeof obj[i] == "object") {
      let flatObj = flatten(obj[i]);
      for (let j in flatObj) {
        if (!flatObj.hasOwnProperty(j)) continue;
        keys[i + "." + j] = flatObj[j];
      }
    } else {
      keys[i] = obj[i];
    }
  }
  return keys;
}

Thank you in advance!

javascript json object cartesian-product

Answer 1

Answer №1

You can transform the array's values into flat objects by taking them as part of a cartesian product.

const
    getArray = val => Array.isArray(val) ? val : [val],
    isObject = val => val && typeof val === 'object',
    getCartesian = obj => Object.entries(obj).reduce((res, [key, val]) => res.flatMap(item =>
        getArray(val).flatMap(w =>
            (isObject(w) ? getCartesian(w) : [w]).map(x => ({ ...item, [key]: x }))
        )
    ), [{}]),
    getFlat = o => Object.entries(o).flatMap(([key, val]) => isObject(val)
        ? getFlat(val).map(([l, val]) => [`${key}.${l}`, val])
        : [[key, val]]
    ),
    input = { name: "Benny", department: { section: "Technical", branch: { timezone: "UTC" } }, company: [{ name: "SAP", customers: ["Ford-1", "Nestle-1"] }, { name: "SAP", customers: ["Ford-2", "Nestle-2"] }] },
    result = getCartesian(input).map(o => Object.fromEntries(getFlat(o)));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

You can transform the array's values into flat objects by taking them as part of a cartesian product.

const
    getArray = val => Array.isArray(val) ? val : [val],
    isObject = val => val && typeof val === 'object',
    getCartesian = obj => Object.entries(obj).reduce((res, [key, val]) => res.flatMap(item =>
        getArray(val).flatMap(w =>
            (isObject(w) ? getCartesian(w) : [w]).map(x => ({ ...item, [key]: x }))
        )
    ), [{}]),
    getFlat = o => Object.entries(o).flatMap(([key, val]) => isObject(val)
        ? getFlat(val).map(([l, val]) => [`${key}.${l}`, val])
        : [[key, val]]
    ),
    input = { name: "Benny", department: { section: "Technical", branch: { timezone: "UTC" } }, company: [{ name: "SAP", customers: ["Ford-1", "Nestle-1"] }, { name: "SAP", customers: ["Ford-2", "Nestle-2"] }] },
    result = getCartesian(input).map(o => Object.fromEntries(getFlat(o)));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Revise

In the following code, I maintained your flatten function as is. Additionally, I introduced a new method called fix that transforms your original output into the desired format.

Please note: I altered the name value of the second occurrence of company to FOO.

const flatten = (obj) => {
  let keys = {};
  for (let i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    if (typeof obj[i] == 'object') {
      let flatObj = flatten(obj[i]);
      for (let j in flatObj) {
        if (!flatObj.hasOwnProperty(j)) continue;
        keys[i + '.' + j] = flatObj[j];
      }
    } else {
      keys[i] = obj[i];
    }
  }
  return keys;
};

const parseKey = (key) => [...key.matchAll(/(\w+)\.(\d)(?=\.?)/g)]
  .map(([match, key, index]) => ({ key, index }));

const fix = (obj) => {
  const results = [];
  Object.keys(obj).forEach((key) => {
    const pairs = parseKey(key);
    if (pairs.length > 1) {
      const result = {};
      Object.keys(obj).forEach((subKey) => {
        const subPairs = parseKey(subKey);
        let replacerKey;
        if (subPairs.length < 1) {
          replacerKey = subKey;
        } else {
          if (
            subPairs.length === 1 &&
            subPairs[0].index === pairs[0].index
          ) {
            replacerKey = subKey
              .replace(`\.${subPairs[0].index}`, '');
          }
          if (
            subPairs.length === 2 &&
            subPairs[0].index === pairs[0].index &&
            subPairs[1].index === pairs[1].index
          ) {
             replacerKey = subKey
              .replace(`\.${subPairs[0].index}`, '')
              .replace(`\.${subPairs[1].index}`, '');
             result[replacerKey] = obj[subKey];
          }
        }
        if (replacerKey) {
          result[replacerKey] = obj[subKey];
        }
      });
      results.push(result);
    }
  });
  return results;
};


const input = {
  name: "Benny",
  department: { section: "Technical", branch: { timezone: "UTC" } },
  company: [
    { name: "SAP", customers: ["Ford-1", "Nestle-1"] },
    { name: "FOO", customers: ["Ford-2", "Nestle-2"] },
  ]
};

const flat = flatten(input);
console.log(JSON.stringify(fix(flat), null, 2));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Initial solution

The most accurate method I could find to achieve your intended outcome is displayed below:

[
  {
    "name": "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers.0": "Ford-1",
    "company.customers.1": "Nestle-1"
  },
  {
    "name": "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers.0": "Ford-2",
    "company.customers.1": "Nestle-2"
  }
]

To obtain this result, I created a utility function named flattenBy which handles mapping the data based on a specific key such as company and then passes it to your existing flatten function (along with the current index).

const flatten = (obj, key, index) => {
  let keys = {};
  for (let i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    let ref = i !== key ? obj[i] : obj[i][index];
    if (typeof ref == 'object') {
      let flatObj = flatten(ref, key);
      for (let j in flatObj) {
        if (!flatObj.hasOwnProperty(j)) continue;
        keys[i + '.' + j] = flatObj[j];
      }
    } else { keys[i] = obj[i]; }
  }
  return keys;
}

const flattenBy = (obj, key) =>
  obj[key].map((item, index) => flatten(obj, key, index));


const input = {
  name: "Benny",
  department: { section: "Technical", branch: { timezone: "UTC" } },
  company: [
    { name: "SAP", customers: ["Ford-1", "Nestle-1"] },
    { name: "SAP", customers: ["Ford-2", "Nestle-2"] },
  ]
};

console.log(JSON.stringify(flattenBy(input, 'company'), null, 2));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 4

Revise

In the following code, I maintained your flatten function as is. Additionally, I introduced a new method called fix that transforms your original output into the desired format.

Please note: I altered the name value of the second occurrence of company to FOO.

const flatten = (obj) => {
  let keys = {};
  for (let i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    if (typeof obj[i] == 'object') {
      let flatObj = flatten(obj[i]);
      for (let j in flatObj) {
        if (!flatObj.hasOwnProperty(j)) continue;
        keys[i + '.' + j] = flatObj[j];
      }
    } else {
      keys[i] = obj[i];
    }
  }
  return keys;
};

const parseKey = (key) => [...key.matchAll(/(\w+)\.(\d)(?=\.?)/g)]
  .map(([match, key, index]) => ({ key, index }));

const fix = (obj) => {
  const results = [];
  Object.keys(obj).forEach((key) => {
    const pairs = parseKey(key);
    if (pairs.length > 1) {
      const result = {};
      Object.keys(obj).forEach((subKey) => {
        const subPairs = parseKey(subKey);
        let replacerKey;
        if (subPairs.length < 1) {
          replacerKey = subKey;
        } else {
          if (
            subPairs.length === 1 &&
            subPairs[0].index === pairs[0].index
          ) {
            replacerKey = subKey
              .replace(`\.${subPairs[0].index}`, '');
          }
          if (
            subPairs.length === 2 &&
            subPairs[0].index === pairs[0].index &&
            subPairs[1].index === pairs[1].index
          ) {
             replacerKey = subKey
              .replace(`\.${subPairs[0].index}`, '')
              .replace(`\.${subPairs[1].index}`, '');
             result[replacerKey] = obj[subKey];
          }
        }
        if (replacerKey) {
          result[replacerKey] = obj[subKey];
        }
      });
      results.push(result);
    }
  });
  return results;
};


const input = {
  name: "Benny",
  department: { section: "Technical", branch: { timezone: "UTC" } },
  company: [
    { name: "SAP", customers: ["Ford-1", "Nestle-1"] },
    { name: "FOO", customers: ["Ford-2", "Nestle-2"] },
  ]
};

const flat = flatten(input);
console.log(JSON.stringify(fix(flat), null, 2));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Initial solution

The most accurate method I could find to achieve your intended outcome is displayed below:

[
  {
    "name": "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers.0": "Ford-1",
    "company.customers.1": "Nestle-1"
  },
  {
    "name": "Benny",
    "department.section": "Technical",
    "department.branch.timezone": "UTC",
    "company.name": "SAP",
    "company.customers.0": "Ford-2",
    "company.customers.1": "Nestle-2"
  }
]

To obtain this result, I created a utility function named flattenBy which handles mapping the data based on a specific key such as company and then passes it to your existing flatten function (along with the current index).

const flatten = (obj, key, index) => {
  let keys = {};
  for (let i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    let ref = i !== key ? obj[i] : obj[i][index];
    if (typeof ref == 'object') {
      let flatObj = flatten(ref, key);
      for (let j in flatObj) {
        if (!flatObj.hasOwnProperty(j)) continue;
        keys[i + '.' + j] = flatObj[j];
      }
    } else { keys[i] = obj[i]; }
  }
  return keys;
}

const flattenBy = (obj, key) =>
  obj[key].map((item, index) => flatten(obj, key, index));


const input = {
  name: "Benny",
  department: { section: "Technical", branch: { timezone: "UTC" } },
  company: [
    { name: "SAP", customers: ["Ford-1", "Nestle-1"] },
    { name: "SAP", customers: ["Ford-2", "Nestle-2"] },
  ]
};

console.log(JSON.stringify(flattenBy(input, 'company'), null, 2));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 5

Answer №3

This piece of code is designed to identify all forks, which are points where arrays exist indicating multiple potential versions of the input. It then creates a tree of permutations for each fork and ultimately applies a flattener to obtain the desired dot-delimited outcome.

Special Note: In this code snippet, h serves as a value holder. When h.s is set to 1 upon detecting the first fork, it essentially acts as a global variable across all calls to getFork on a given initial object. This ensures that only one fork is processed at a time while constructing a tree of forks.

const input = {"name":"Benny","department":{"section":"Technical","branch":{"timezone":"UTC"}},"company":[{"name":"SAP","customers":["Ford-1","Nestle-1"]},{"name":"SAP","customers":["Ford-2","Nestle-2"]},{"name":"BAZ","customers":["Maserati","x"],"SomeKey":["2","3"]}]}
    
const flatten = (o, prefix='') => Object.entries(o).flatMap(([k,v])=>v instanceof Object ? flatten(v, `${prefix}${k}.`) : [[`${prefix}${k}`,v]])
const findFork = o => Array.isArray(o) ? o.length : o instanceof Object && Object.values(o).map(findFork).find(i=>i)
const getFork = (o,i,h={s:0}) => o instanceof Object ? (Array.isArray(o) ? h.s ? o : (h.s=1) && o[i] : Object.fromEntries(Object.entries(o).map(([k,v])=>[k, getFork(v, i, h)]))) : o
const recurse = (o,n) => (n = findFork(o)) ? Array(n).fill(0).map((_,i)=>getFork(o, i)).flatMap(recurse) : o
const process = o => recurse(o).map(i=>Object.fromEntries(flatten(i)))
    
const result = process(input)
console.log(result)

Answer 6

This piece of code is designed to identify all forks, which are points where arrays exist indicating multiple potential versions of the input. It then creates a tree of permutations for each fork and ultimately applies a flattener to obtain the desired dot-delimited outcome.

Special Note: In this code snippet, h serves as a value holder. When h.s is set to 1 upon detecting the first fork, it essentially acts as a global variable across all calls to getFork on a given initial object. This ensures that only one fork is processed at a time while constructing a tree of forks.

const input = {"name":"Benny","department":{"section":"Technical","branch":{"timezone":"UTC"}},"company":[{"name":"SAP","customers":["Ford-1","Nestle-1"]},{"name":"SAP","customers":["Ford-2","Nestle-2"]},{"name":"BAZ","customers":["Maserati","x"],"SomeKey":["2","3"]}]}
    
const flatten = (o, prefix='') => Object.entries(o).flatMap(([k,v])=>v instanceof Object ? flatten(v, `${prefix}${k}.`) : [[`${prefix}${k}`,v]])
const findFork = o => Array.isArray(o) ? o.length : o instanceof Object && Object.values(o).map(findFork).find(i=>i)
const getFork = (o,i,h={s:0}) => o instanceof Object ? (Array.isArray(o) ? h.s ? o : (h.s=1) && o[i] : Object.fromEntries(Object.entries(o).map(([k,v])=>[k, getFork(v, i, h)]))) : o
const recurse = (o,n) => (n = findFork(o)) ? Array(n).fill(0).map((_,i)=>getFork(o, i)).flatMap(recurse) : o
const process = o => recurse(o).map(i=>Object.fromEntries(flatten(i)))
    
const result = process(input)
console.log(result)

Convert a complex nested JSON structure into an array of distinct objects without using indexes

Answer №1

Answer №2

Revise

Initial solution

Answer №3

Similar questions

Switch from Index.html to Index.html#section1

Transferring information from Console to a web address

Attempting to create a responsive Boxplot in Three.js

Placing a dynamic loading image in the center of a webpage

What alternative can be used instead of Document in Javascript when working with EJS?

Maintain the highlighted background of the selected slot in react-big-calendar even after the selection process is completed

Refreshing the lightbox once new ajax content is loaded

Assign a Value to a Hidden Input Type When a User Submits a Form

What happened? Node.js server abruptly terminated the connection?

Accept two parameters for password change

What are the keys that have the specified string in them?

Javascript - SecurityError: The action is not secure

Objects hidden in the darkness, utilizing the traditional MeshPhongMaterial

Experiencing a lack of content in an Express response

Interpreting an undefined HTTP GET request within a Node.js server

Attaching to directive parameters

How come my Bootstrap tooltip title only updates once when I use the keydown event in jQuery?

How can I show a loading screen while making a synchronous AJAX call in Chrome?

Error due to PlatformLocation's location dependency issue

The function for converting a jQuery element to a DOM element is yielding a blank string as