Combine two entities to create a new entity that mirrors the structure of the first entity

Question

Combine two entities to create a new entity that mirrors the structure of the first entity

Can someone assist me with a data structure issue?

Here are the objects I am working with:

const elements = {
  item1: {color: 'blue', name: 'Item One' },
  item2: {color: 'green', name: 'Item Two' },
  item3: {color: 'red', name: 'Item Three' },
}

const values = { id: 0, item1: 20, item2: 50, item3: 10 }

I am trying to create another object (elementsWithValues) in this format:

const elementsWithValues = {
  item1: {color: 'blue', name: 'Item One', value: 20 },
  item2: {color: 'green', name: 'Item Two', value: 50 },
  item3: {color: 'red', name: 'Item Three', value: 10 },
}

This is the code snippet I have attempted:

const elementsWithValues = [
  ...Object.entries(elements).map(([itemName, element]) => ({
    [itemName]: { ...element, value: values[itemName] },
  })),
]

However, I am currently getting this result:

[
  { item1: {color: 'blue', name: 'Item One', value: 20 } },
  { item2: {color: 'green', name: 'Item Two', value: 50 } },
  { item3: {color: 'red', name: 'Item Three', value: 10 } },
]

javascript arrays object

Answer 1

Answer №1

Close, but the correct method to use here is reduce instead of map.

const data = {
  item1: {type: 'car', color: 'red' },
  item2: {type: 'bike', color: 'blue' },
  item3: {type: 'boat', color: 'green' },
}

const info = { id: 1, item1: 'Toyota', item2: 'Yamaha', item3: 'Speedboat' }

const updatedInfo = Object.entries(data).reduce((obj,[itemName, details]) => {
    obj[itemName] = { ...details, newInfo: info[itemName] };
    return obj;
 }, {})

console.log(updatedInfo)

Answer 2

Close, but the correct method to use here is reduce instead of map.

const data = {
  item1: {type: 'car', color: 'red' },
  item2: {type: 'bike', color: 'blue' },
  item3: {type: 'boat', color: 'green' },
}

const info = { id: 1, item1: 'Toyota', item2: 'Yamaha', item3: 'Speedboat' }

const updatedInfo = Object.entries(data).reduce((obj,[itemName, details]) => {
    obj[itemName] = { ...details, newInfo: info[itemName] };
    return obj;
 }, {})

console.log(updatedInfo)

Answer 3

Answer №2

To bring an object back from entries, follow this code snippet.

Object.fromEntries(Object.entries(dataInfo).map(([k, val]) => [k, { ...val,
  val: newDataPoint[k]
}]))

const dataInfo = {
  categoryA: {
    color: 'purple',
    name: 'Category Alpha'
  },
  categoryB: {
    color: 'orange',
    name: 'Category Beta'
  },
  categoryC: {
    color: 'blue',
    name: 'Category Charlie'
  },
}

const newDataPoint = {
  id: 0,
  categoryA: 12,
  categoryB: 45,
  categoryC: 78
}

const updatedResult = Object.fromEntries(Object.entries(dataInfo).map(([k, val]) => [k, { ...val,
  val: newDataPoint[k]
}]))

console.log(JSON.stringify(updatedResult))

Answer 4

To bring an object back from entries, follow this code snippet.

Object.fromEntries(Object.entries(dataInfo).map(([k, val]) => [k, { ...val,
  val: newDataPoint[k]
}]))

const dataInfo = {
  categoryA: {
    color: 'purple',
    name: 'Category Alpha'
  },
  categoryB: {
    color: 'orange',
    name: 'Category Beta'
  },
  categoryC: {
    color: 'blue',
    name: 'Category Charlie'
  },
}

const newDataPoint = {
  id: 0,
  categoryA: 12,
  categoryB: 45,
  categoryC: 78
}

const updatedResult = Object.fromEntries(Object.entries(dataInfo).map(([k, val]) => [k, { ...val,
  val: newDataPoint[k]
}]))

console.log(JSON.stringify(updatedResult))

Answer 5

Answer №3

I prefer breaking it down into two steps for better code readability. First, copying the infos and then updating the values:

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
}

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 }

// begin the logic here!
infosWithValues = { ...infos }; // make a copy
Object.keys(infosWithValues)
      .forEach(k => infosWithValues[k].value = datum[k]); // update the values

console.log(infosWithValues);

Answer 6

I prefer breaking it down into two steps for better code readability. First, copying the infos and then updating the values:

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
}

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 }

// begin the logic here!
infosWithValues = { ...infos }; // make a copy
Object.keys(infosWithValues)
      .forEach(k => infosWithValues[k].value = datum[k]); // update the values

console.log(infosWithValues);

Answer 7

Answer №4

Getting the desired result is quite simple - you can achieve it by spreading your array of objects within a call to Object.assign() as shown below:

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
};

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 };
const infosWithValues = Object.assign({}, 
  ...Object.entries(infos).map(([columnName, info]) => ({
    [columnName]: { ...info, value: datum[columnName] },
  })),
);

console.log(infosWithValues);

Alternatively, you can utilize the newer Object.fromEntries() method. This method takes an array of [[key, value], ...] pairs and constructs an object from that array:

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
};

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 };
const infosWithValues = Object.fromEntries(
  Object.entries(infos).map(([columnName, info]) => 
    [columnName, { ...info, value: datum[columnName] }]
  )
);

console.log(infosWithValues);

Answer 8

Getting the desired result is quite simple - you can achieve it by spreading your array of objects within a call to Object.assign() as shown below:

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
};

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 };
const infosWithValues = Object.assign({}, 
  ...Object.entries(infos).map(([columnName, info]) => ({
    [columnName]: { ...info, value: datum[columnName] },
  })),
);

console.log(infosWithValues);

Alternatively, you can utilize the newer Object.fromEntries() method. This method takes an array of [[key, value], ...] pairs and constructs an object from that array:

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
};

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 };
const infosWithValues = Object.fromEntries(
  Object.entries(infos).map(([columnName, info]) => 
    [columnName, { ...info, value: datum[columnName] }]
  )
);

console.log(infosWithValues);

Answer 9

Answer №5

let data = {
  firstItem: {color: 'blue', name: 'First Object' },
  secondItem: {color: 'green', name: 'Second Object' },
  thirdItem: {color: 'red', name: 'Third Object' },
}

let values = { id: 1, firstItem: 10, secondItem: 50, thirdItem: 25 }

let dataWithValues = Object.assign({}, data);

Object.keys(values).forEach(key => {
  if (dataWithValues[key]) dataWithValues[key].value = values[key];
});

console.log(dataWithValues);

Answer 10

let data = {
  firstItem: {color: 'blue', name: 'First Object' },
  secondItem: {color: 'green', name: 'Second Object' },
  thirdItem: {color: 'red', name: 'Third Object' },
}

let values = { id: 1, firstItem: 10, secondItem: 50, thirdItem: 25 }

let dataWithValues = Object.assign({}, data);

Object.keys(values).forEach(key => {
  if (dataWithValues[key]) dataWithValues[key].value = values[key];
});

console.log(dataWithValues);

Combine two entities to create a new entity that mirrors the structure of the first entity

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to include temporary attributes on a mongoose object solely for the purpose of a response, without saving them to the database

Turn off laptop camera to assess web application functionality in the absence of a camera on the device

Adding date restrictions to the main method is necessary for controlling the input and output

How to update an empty array in NodeJS using Mongoose

How can I access the id_lang variable in React JS from outside its scope?

Tips for sending a JavaScript variable through an AJAX URL

Is there a way to efficiently include numerous jQuery scripts in a batch process, each with a slight variation, using a loop?

Accessing a Kendo Grid instance within an Angular directive

Animate elements in Vue.js when navigating between pages is a great way to enhance user

How to access a deeply nested object in Angular 2

Clicking on a flex card will trigger the opening of a new page where the parsed data will be displayed in a stylish manner using JavaScript

What steps can I take to avoid Vue.js overriding jQuery bindings within components?

Why is JavaScript globally modifying the JSON object?

Which language is better for refreshing web pages: PHP or Javascript?

Angular's import and export functions are essential features that allow modules

Automatically populate the article number field once the article name has been entered

Displaying live data from a spreadsheet directly on a sidebar

Speedily deliver a message to the designated destination

The checkbox linked to a Vector layer in Openlayers 3 seems to have no effect on its visibility

Is it possible to navigate to the Next page using a different button instead of the pagination controls