Traversing an object and assigning its properties as values in another object using JavaScript

Question

Traversing an object and assigning its properties as values in another object using JavaScript

I need to create an object using an array as keys and another object with default properties as values. I am unsure of how to loop through and assign the key/value pairs to the new object. Can you help me out? Thank you!

The object myFinalObj is initially empty.

This is my starting object:

var startingObj = {
  'one' : {'default': 1, 'name': 'un'},
  'two' : {'default': 2, 'name': 'deux'},
  'three': {'default': 3, 'name': 'trois'}
}

Here is my array:

var myArray = ['one', 'two', 'three'];

This is what my final object should look like:

var myFinalObj = {
  'one' : 1,
  'two' : 2,
  'three' : 3
}

javascript arrays loops object

Answer 1

Answer №1

const myNewObject = myArray.reduce((accumulator, name) => { 
  accumulator[name] = startingObj[name].default;
  return accumulator;
}, {})

Referencing MDN documentation:

The reduce() function executes a provided function for each value of an array (from left to right), resulting in a single output value.

Arrow functions are a relatively new feature in JavaScript. If they are not supported in your environment, you can use the longer but equivalent syntax:

 const myNewObject = myArray.reduce(function(accumulator, name) { 
  accumulator[name] = startingObj[name].default;
  return accumulator;
}, {})

For older versions of Internet Explorer (IE < 9), the reduce function may not be available. In such cases, you can utilize the polyfill provided in the same MDN article.

Answer 2

const myNewObject = myArray.reduce((accumulator, name) => { 
  accumulator[name] = startingObj[name].default;
  return accumulator;
}, {})

Referencing MDN documentation:

The reduce() function executes a provided function for each value of an array (from left to right), resulting in a single output value.

Arrow functions are a relatively new feature in JavaScript. If they are not supported in your environment, you can use the longer but equivalent syntax:

 const myNewObject = myArray.reduce(function(accumulator, name) { 
  accumulator[name] = startingObj[name].default;
  return accumulator;
}, {})

For older versions of Internet Explorer (IE < 9), the reduce function may not be available. In such cases, you can utilize the polyfill provided in the same MDN article.

Answer 3

Answer №2

let initialObject = {
  'red': {
    'default': '#FF0000',
    'name': 'rouge'
  },
  'blue': {
    'default': '#0000FF',
    'name': 'bleu'
  },
  'green': {
    'default': '#00FF00',
    'name': 'vert'
  }
}

let colorArray = ['red', 'blue', 'green'];

let finalResult = {};

colorArray.forEach(function(color){
 finalResult[color] = initialObject[color]['default']; 
}

Answer 4

let initialObject = {
  'red': {
    'default': '#FF0000',
    'name': 'rouge'
  },
  'blue': {
    'default': '#0000FF',
    'name': 'bleu'
  },
  'green': {
    'default': '#00FF00',
    'name': 'vert'
  }
}

let colorArray = ['red', 'blue', 'green'];

let finalResult = {};

colorArray.forEach(function(color){
 finalResult[color] = initialObject[color]['default']; 
}

Answer 5

Answer №3

To assign values to property keys, use the syntax obj["key"]=value. The following code snippet demonstrates how this can be implemented:

var resultantObj={};
for(var j=0;j<array.length;j++){
    resultantObj[array[j]]=initialObj[array[j]];
}

Answer 6

To assign values to property keys, use the syntax obj["key"]=value. The following code snippet demonstrates how this can be implemented:

var resultantObj={};
for(var j=0;j<array.length;j++){
    resultantObj[array[j]]=initialObj[array[j]];
}

Answer 7

Answer №4

To ensure compatibility with older browsers, it is recommended to use either for(.. in ..) or for (var i=0;i<..;i++) instead of Array.forEach.

var myArray = ['apple', 'banana', 'cherry'];
var startingObj = {
  'apple' : {'default': 1, 'name': 'red'},
  'banana' : {'default': 2, 'name': 'yellow'},
  'cherry': {'default': 3, 'name': 'red'}
}
var myFinalObj = {};
for (key in myArray) {
myFinalObj[myArray[key]] = startingObj[myArray[key]].default;
}
console.log(myFinalObj);

Answer 8

To ensure compatibility with older browsers, it is recommended to use either for(.. in ..) or for (var i=0;i<..;i++) instead of Array.forEach.

var myArray = ['apple', 'banana', 'cherry'];
var startingObj = {
  'apple' : {'default': 1, 'name': 'red'},
  'banana' : {'default': 2, 'name': 'yellow'},
  'cherry': {'default': 3, 'name': 'red'}
}
var myFinalObj = {};
for (key in myArray) {
myFinalObj[myArray[key]] = startingObj[myArray[key]].default;
}
console.log(myFinalObj);

Answer 9

Answer №5

Give this a shot:

let initialObject = {
  'one' : {'default': 1, 'name': 'un'},
  'two' : {'default': 2, 'name': 'deux'},
  'three': {'default': 3, 'name': 'trois'}
}

let myArray = ['one', 'two', 'three'];

let finalObject = {}

for(let item of myArray){
    if(initialObject.hasOwnProperty(item)){
        finalObject[item] = initialObject[item].default
    }
}

Answer 10

Give this a shot:

let initialObject = {
  'one' : {'default': 1, 'name': 'un'},
  'two' : {'default': 2, 'name': 'deux'},
  'three': {'default': 3, 'name': 'trois'}
}

let myArray = ['one', 'two', 'three'];

let finalObject = {}

for(let item of myArray){
    if(initialObject.hasOwnProperty(item)){
        finalObject[item] = initialObject[item].default
    }
}

Answer 11

Answer №6

function constructObject(initialObject, keysArray, resultObject) {
  var currentKey;
  for (var index = 0; index < keysArray.length; index++) {
    currentKey = keysArray[index];
    resultObject[currentKey] = initialObject[currentKey]['default'];
  }
}

var finalObject = {};
constructObject(initialObj, keyList, finalObject);

Answer 12

function constructObject(initialObject, keysArray, resultObject) {
  var currentKey;
  for (var index = 0; index < keysArray.length; index++) {
    currentKey = keysArray[index];
    resultObject[currentKey] = initialObject[currentKey]['default'];
  }
}

var finalObject = {};
constructObject(initialObj, keyList, finalObject);

Answer 13

Answer №7

Try out this straightforward code snippet:

const finalObject = {};
initialArray.forEach((parameter) => {
    finalObject[parameter] = baseObj[parameter].default;
});
console.log(finalObject);

Answer 14

Try out this straightforward code snippet:

const finalObject = {};
initialArray.forEach((parameter) => {
    finalObject[parameter] = baseObj[parameter].default;
});
console.log(finalObject);

Answer 15

Answer №8

Does this code snippet reflect your desired outcome? From the provided test case, it appears to be functioning as expected.


var initialData = {
  'one' : {'default': 1, 'name': 'un'},
  'two' : {'default': 2, 'name': 'deux'},
  'three': {'default': 3, 'name': 'trois'}
}

var targetArray = ['one', 'two', 'three'];

var resultObject = {};

for (var index = 0; index < targetArray.length; index++){
    for (var property in initialData){
        if (property == targetArray[index]){
           var value = initialData[property]['default'];
           break;
        }

    }
    resultObject[targetArray[index]] = value;
}

console.log(resultObject);

Answer 16

Does this code snippet reflect your desired outcome? From the provided test case, it appears to be functioning as expected.


var initialData = {
  'one' : {'default': 1, 'name': 'un'},
  'two' : {'default': 2, 'name': 'deux'},
  'three': {'default': 3, 'name': 'trois'}
}

var targetArray = ['one', 'two', 'three'];

var resultObject = {};

for (var index = 0; index < targetArray.length; index++){
    for (var property in initialData){
        if (property == targetArray[index]){
           var value = initialData[property]['default'];
           break;
        }

    }
    resultObject[targetArray[index]] = value;
}

console.log(resultObject);

Traversing an object and assigning its properties as values in another object using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Timepicker.js - Incorrect Placement of Time Picker in Certain Scenarios

What is the best way to utilize the history prop in conjunction with other props?

Can the value in a JavaScript object be updated dynamically when a button is clicked?

Storing User IP Address in Database with Express and Mongoose

AngularJS displays true for $scope.form.$submitted

Troubleshooting undefined results when dynamically loading JSON data with $scope values in AngularJS

Steps for obtaining images using lazy loading: <img loading="lazy"

Gather data from various textboxes and combine them into a unified string with the help of JavaScript

Determine the quantity of posts currently in the Div

Safeguard sub-pages with Passport Local if the user has not logged in

Leverage the controller's properties and methods within the directive

Using a React PureComponent to pass parameters from a Child component

Troubleshooting the Google OAuth 2.0 SAMEORIGIN Issue

Searching through a JSON object on a Laravel web page using JavaScript or AJAX for live filtering purposes

Issues with sending data through ajax using the post method persist on shared web hosting

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

What are the steps to switch multiple CSS styles for creating a dark mode?

Exploring through an array tree structure?

Validation scheme for the <speak> element

What is the best way to retrieve data for a Dojo Dgrid Table using AJAX?