List of nested objects converted into a flat array of objects

Question

List of nested objects converted into a flat array of objects

Looking to transform a data structure from an

array of objects containing objects

to an objects in array setup using JavaScript/Typescript.

Input:

[
  {
    "a": "Content A",
    "b": 
    {
      "1": "Content 1",
      "2": "Content 2"
    }
  },
  {
    "y": "Content Y",
    "x": 
    {
      "3": "Content 3",
      "4": "Content 4"
    }
  },

]

Expected output

[
  {a: "Content A", b: "Content 1"}, 
  {a: "Content A", b: "Content 2"},
  {y: "Content Y", x: "Content 3"},
  {y: "Content Y", x: "Content 4"}
]

Providing solutions in both TypeScript and JavaScript would be greatly appreciated!

javascript arrays typescript javascript-objects

Answer 1

Answer №1

Here is the solution you can try:

const all = [
    {
      "a": "Content A",
      "b": 
      {
        "1": "Content 1",
        "2": "Content 2"
      }
    },
    {
      "y": "Content Y",
      "x": 
      {
        "3": "Content 3",
        "4": "Content 4"
      }
    },
];
console.log(all.reduce((prev, el) =>{
    let curr = Object.entries(el);
let k1 = curr[0][0];
let k2 = curr[1][0];
    Object.entries(curr[1][1]).forEach((o => {
        
        let obj ={}
        obj[k1] = curr[0][1];
        obj[k2] = o[1];
        prev.push(obj);
    }))
    return prev;
},[]))

Answer 2

Here is the solution you can try:

const all = [
    {
      "a": "Content A",
      "b": 
      {
        "1": "Content 1",
        "2": "Content 2"
      }
    },
    {
      "y": "Content Y",
      "x": 
      {
        "3": "Content 3",
        "4": "Content 4"
      }
    },
];
console.log(all.reduce((prev, el) =>{
    let curr = Object.entries(el);
let k1 = curr[0][0];
let k2 = curr[1][0];
    Object.entries(curr[1][1]).forEach((o => {
        
        let obj ={}
        obj[k1] = curr[0][1];
        obj[k2] = o[1];
        prev.push(obj);
    }))
    return prev;
},[]))

Answer 3

Answer №2

Utilize the flatMap method along with Object.entries

const result = (arr) =>
  arr.flatMap((item) => {
    const [key1, str] = Object.entries(item).find(
      ([, val]) => typeof val === "string"
    );
    const [key2, obj] = Object.entries(item).find(
      ([, val]) => typeof val === "object"
    );
    return Object.values(obj).map((value) => ({ [key1]: str, [key2]: value }));
  });

const information = [
  {
    a: "Content A",
    b: {
      "1": "Content 1",
      "2": "Content 2",
    },
  },
  {
    y: "Content Y",
    x: {
      "3": "Content 3",
      "4": "Content 4",
    },
  },
];

console.log(result(information))

Answer 4

Utilize the flatMap method along with Object.entries

const result = (arr) =>
  arr.flatMap((item) => {
    const [key1, str] = Object.entries(item).find(
      ([, val]) => typeof val === "string"
    );
    const [key2, obj] = Object.entries(item).find(
      ([, val]) => typeof val === "object"
    );
    return Object.values(obj).map((value) => ({ [key1]: str, [key2]: value }));
  });

const information = [
  {
    a: "Content A",
    b: {
      "1": "Content 1",
      "2": "Content 2",
    },
  },
  {
    y: "Content Y",
    x: {
      "3": "Content 3",
      "4": "Content 4",
    },
  },
];

console.log(result(information))

List of nested objects converted into a flat array of objects

Answer №1

Answer №2

Similar questions

Issues with appending characters to char*[] array

Ways to disperse items within another item

Data not being retrieved by HTTP GET request

Strange activities observed during the management of state in react hooks, where the splice() function ends up eliminating the

Troubleshooting: JQuery dropdown selection not updating image display

What is the procedure for adding a URL path in jQuery?

Gauging Screen Size: A Comparison between Media Queries and JavaScript for Adjusting Div Position

What are the steps to resolve TypeScript errors in OpenLayers version 6.6.1?

A guide to using jqGrid: Retrieve the value of a particular cell by double clicking on a row

Utilizing Data Binding in D3.js

Retrieve deeply nested information without excessive nested looping structures

What strategies can I use to preserve type narrowing when utilizing the Array.find method?

Map several keys to a single value within an array

Find the location in a node.js script where a promise was rejected

Neglecting the inclusion of a property when verifying for empty properties

What is the process for logging out when a different user signs in using Firebase authentication in a React Native application?

No need to conceal content when switching to another tab if the tab is set to stay in place

guide on adding a variable to the link_to path

I am experiencing an issue where Discord.js is unable to assign a role to a new member upon joining my server

Customizing number input types in Angular 2 - the perfect solution