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

Accessing Ionic rootScope within the config stateprovider - A step-by-step guide

a solution to the focus/blur issue in Firefox's browser bug

By default, the text area element in Vue or Nuxt will send a message to the console

adding a new div to the bottom of a row that is being created on the fly

Is there a way to compel the browser or JavaScript to delete/disregard a cached file?

Animated CSS sidemenu (utilized as a filtering panel for a table)

Combine several dictionary values under a single dictionary key in JavaScript

How to retrieve the class of a dynamic div by clicking on a different div using jQuery?

Transform a JSON string into a JSONArray

Modify the events JSON URL when the Full Calendar changes its display period

VueJS error: Trying to access properties of undefined object ('$refs') is unsuccessful

Using C# to generate a JSON array by extracting information from a CSV file

Unable to arrange an array of JavaScript objects retrieved via an Angular REST request

Is there a secure way to prevent user input from causing issues in a BigQuery node insert? Can the BigQuery.insert node library support parameterized queries for added security

Struggling with slow loading times for Three.JS GLTF models? Discover ways to optimize and speed up the load time

methods for transferring javascript variables to modal

Can someone tell me what comes after my nextElementSibling in this specific scenario?

error encountered while parsing nlohmann json at memory location

What is the best method to collect information from multiple AJAX requests?

Displaying numerous Google maps on a single webpage featuring distinct collections of location markers