Here are the steps to divide an array of objects into separate objects based on their keys

Question

Here are the steps to divide an array of objects into separate objects based on their keys

The data I currently have is formatted like this:

[{
    "Consumer": [{
        "Associated ID": "JSUDB2LXXX / BIC 7503 / US",
        "Parent Consumer": "7503"
    }],
    "Owner": [{
        "Entity": "EN",
        "Region": "LA"
    }]
}]

I am looking to transform it into the following format. Each old key and value pair will be split into a separate object with "title" as the new key for the old key, and "name" as the corresponding value.

[{
    "Consumer": [{
            "title": "Associated ID",
            "name": "JSUDB2LXXX / BIC 7503 / US"
        },
        {
            "title": "Parent Consumer",
            "name": "7503"
        }
    ],
    "Owner": [{
            "title": "Entity",
            "name": "EN"
        },
        {
            "title": "Region",
            "name": "LA"
        }
    ]
}]

javascript arrays json object

Answer 1

Answer №1

Just a little something to assist:

let sampleData = [{
    "Customer": [{
        "ID": "JSUDB2LXXX / BIC 7503 / US",
        "Parent Customer": "7503"
    }],
    "Owner": [{
        "Organization": "EN",
        "Area": "LA"
    }]
}]

let result = []
sampleData.forEach(item => {
  Object.keys(item).forEach(propertyKey => {
    let valuesArray = []
    Object.entries(item[propertyKey][0]).forEach(entry => {
      valuesArray.push({heading: entry[0], content: entry[1]})
    })
    let newElement = {}
    newElement[propertyKey] = valuesArray
    final.push(newElement)
  })
})
console.log(result)

You can experiment with it here :

https://jsbin.com/wazuyoyidi/edit?js,console

Answer 2

Just a little something to assist:

let sampleData = [{
    "Customer": [{
        "ID": "JSUDB2LXXX / BIC 7503 / US",
        "Parent Customer": "7503"
    }],
    "Owner": [{
        "Organization": "EN",
        "Area": "LA"
    }]
}]

let result = []
sampleData.forEach(item => {
  Object.keys(item).forEach(propertyKey => {
    let valuesArray = []
    Object.entries(item[propertyKey][0]).forEach(entry => {
      valuesArray.push({heading: entry[0], content: entry[1]})
    })
    let newElement = {}
    newElement[propertyKey] = valuesArray
    final.push(newElement)
  })
})
console.log(result)

You can experiment with it here :

https://jsbin.com/wazuyoyidi/edit?js,console

Answer 3

Answer №2

Using a different approach.

const modifiedResults = data.map((level) => {
  const updatedObject = {};
  Object.entries(level).forEach(([key, value]) => {
    updatedObject[key] = value
      .map((item) =>
        Object.entries(item).map(([property, val]) => ({ property, val }))
      )
      .flat();
  });
  return updatedObject;
});

[https://jsbin.com/rafinobexa/edit?js,console][1]

Answer 4

Using a different approach.

const modifiedResults = data.map((level) => {
  const updatedObject = {};
  Object.entries(level).forEach(([key, value]) => {
    updatedObject[key] = value
      .map((item) =>
        Object.entries(item).map(([property, val]) => ({ property, val }))
      )
      .flat();
  });
  return updatedObject;
});

[https://jsbin.com/rafinobexa/edit?js,console][1]

Here are the steps to divide an array of objects into separate objects based on their keys

Answer №1

Answer №2

Similar questions

Changing Marker Colors in OpenLayers After Importing GPX Data: A Quick Guide

Getting rid of quotes in a JSON result

Transform an array of objects into a nested tree structure with Javascript

Exploring the technique of utilizing a custom completion block with JSONDecoder to efficiently parse nested JSON data

Transform a section of text into JSON format to utilize in DataTables

Tips for revealing a hidden HTML tag

Is it possible for GSON to perform deserialization in a case-insensitive manner?

typescript error is not defined

Issues arise when trying to use JQuery in conjunction with JSON data

Having trouble with installing a React app using npx create-react-app my-app?

Using Javascript to fetch JSON data from a PHP file hosted on an IIS server, incorporating JSONP with

Can anyone guide me on successfully converting SQL Server data to JSON format in real-time using ASP.NET and Visual Studio?

Can we display an express view in response to a WebSocket event?

Enhance your user interface by adding a tooltip above a button

Other options besides re-flowing and repainting

Using JavaScript to Access PHP Files

Tips for accomplishing multiple event triggers and event recollection (benefits that combine features of events and promises)

Error encountered during JSON deserialization process

"Implementing a Filter for Selecting Multiple Options in Ionic Framework

Encountering an error in Angular where the property does not exist in type