Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

Question

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

Hello, I am diving into the world of Typescript/Javascript and encountering some challenges when it comes to manipulating arrays of data. Please bear with me as I navigate through my learning curve.

Imagine having an array of objects structured like this:

items = [{header: "h1", value: "header 1 test"}, {header: "h2", value: "header 2 test"}]

My goal is to iterate through each object in the array, extract their values, and transform them into key:value pair objects. I aim to insert these transformed objects into a new array that should resemble the following:

myNewArray = [{"h1": "header 1 test"}, {"h2": "header 2 test"}]

Currently, I am working on an Angular project with TypeScript, but I am open to suggestions utilizing either Javascript or Typescript. Any modern techniques would be greatly appreciated.

Despite my attempts at using ES6 syntax like [element.header]: [element.value] to create a new array, I am still facing some challenges.

Thank you in advance for your help!

javascript arrays angular typescript

Answer 1

Answer №1

let elements = [{header: "h1", value: "header 1 test"}, {header: "h2", value: "header 2 test"}];

let transformedElements = elements.map(item => ({[item.header]: item.value}));
console.log(transformedElements);

Answer 2

let elements = [{header: "h1", value: "header 1 test"}, {header: "h2", value: "header 2 test"}];

let transformedElements = elements.map(item => ({[item.header]: item.value}));
console.log(transformedElements);

Answer 3

Answer №2

To achieve this, you can utilize the map method on an array. Here is an example in code:

const transformedArray = items.map((item) => {
    const header = item.header;
    const value = item.value;

    return {
        [header]: value
    };
});

By using the map method, you iterate over each element in the array and apply the specified function to transform it. This results in a new array containing the transformed values grouped together.

Answer 4

To achieve this, you can utilize the map method on an array. Here is an example in code:

const transformedArray = items.map((item) => {
    const header = item.header;
    const value = item.value;

    return {
        [header]: value
    };
});

By using the map method, you iterate over each element in the array and apply the specified function to transform it. This results in a new array containing the transformed values grouped together.

Answer 5

Answer №3

One thing that might trip you up is the use of parentheses to enclose the object being returned in a map function

const data = [{heading: "h1", content: "content 1"}, {heading: "h2", content: "content 2"}]
.map(item => ({[item.heading]: item.content}))

console.log(data)

Answer 6

One thing that might trip you up is the use of parentheses to enclose the object being returned in a map function

const data = [{heading: "h1", content: "content 1"}, {heading: "h2", content: "content 2"}]
.map(item => ({[item.heading]: item.content}))

console.log(data)

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

Answer №1

Answer №2

Answer №3

Similar questions

Generate slanted projection mapboxgl

Array[object..] logical operators

I updated the script to include a feature that automatically adds a leading zero to hours, minutes, and seconds if they are less than 10. However, for some reason, the output still doesn't show the leading zero

Is there a way to adjust this validation logic so that it permits the entry of both regular characters and certain special characters?

Filtering in AngularJS based on a specific ID

How about a custom-designed talking JavaScript pop-up?

Utilizing various layouts in ASP.NET MVC with AngularJS

Vue: Opening all GmapInfoWindows simultaneously upon clicking one

Instructions for updating the Modal Value using ajax

My HTML gets rearranged by browsers, causing a change in appearance

JavaScript does not reflect updates made to the ASP.Net session

Postman is displaying [object object] as the return value, but the actual value is not

ServiceAccountKey cannot be located by Firebase deploy

The eccentricities of Angular Translate in Firefox and Safari

Restrictions on the number of characters based on the size of fonts in an html list sc

Generating PNG images with text using Node.js

What is the best way to eliminate or substitute Unicode Characters in Node.js 16?

Enhancing image search functionality through dynamic HTML updates

Having trouble retrieving JSON with crossDomain jQuery AJAX

Unable to locate module within the ngModule imports