I have an array of objects which looks like this:

var finishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

var wheelFinishes = finishes;

As you can see I setup another array of objects which is going to have some different attributes then the "seed" array of objects.

So what I want to do is something like:

UPDATE wheelFinishes WHERE label="Barn Red" SET exclusion="Metal Values"

So the value of wheelFinishes would end up as:

var wheelFinishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red', exclusion:'Metal Values'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

I'm not sure on the actual syntax to update an array of objects in javascript.

I know underscorejs might have some functions that make this type of thing easier, so i'm open to a solution in underscorejs if that's even possible?

I have an array of objects which looks like this:

var finishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

var wheelFinishes = finishes;

As you can see I setup another array of objects which is going to have some different attributes then the "seed" array of objects.

So what I want to do is something like:

UPDATE wheelFinishes WHERE label="Barn Red" SET exclusion="Metal Values"

So the value of wheelFinishes would end up as:

var wheelFinishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red', exclusion:'Metal Values'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

I'm not sure on the actual syntax to update an array of objects in javascript.

I know underscorejs might have some functions that make this type of thing easier, so i'm open to a solution in underscorejs if that's even possible?

• javascript
• jquery
• arrays
• underscore.js

• 2 This can be worked out with .find() developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Robert Commented Aug 6, 2016 at 19:55

5 Answers 5

using Array.prototype.map would be one (of multiple) possible solution:

var wheelFinishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

//extend all objects having a specific label
updatedFinishes = wheelFinishes.map(function(obj) {
  if(obj.label === 'Barn Red') {
    obj.exclusion = 'Metal Values';
  }
  return obj;
});
  
//test
updatedFinishes.forEach(function(obj) {
  console.log(obj);
})

Iterate through the array, and append a property.

Use a function update. I accepts a set of label elements needs to be modified. Under each set of labels, there is another set to append.

var finishes = [{
  label: 'Raw Steel'
}, {
  label: 'Antique Pewter'
}, {
  label: 'Barn Red'
}, {
  label: 'Brushed Stainless Steel'
}, {
  label: 'Brushed Steel'
}, {
  label: 'Copper Patina'
}, {
  label: 'Dark Bronze'
}, {
  label: 'Distressed White'
}, {
  label: 'Flat Black'
}, {
  label: 'Green Patina'
}, {
  label: 'Oil Rubbed Bronze'
}, {
  label: 'White'
}, {
  label: 'Warehouse Bronze'
}, {
  label: 'Weathered Rust'
}, ];

function update(arr) {
  var i, len, len2, len3, elem, j, k, key, value;
  for (i = 0, len = arr.length; i < len; i += 1) {
    elem = arr[i];
    for (j = 0, len2 = finishes.length; j < len2; j += 1) {
      if (finishes[j].label === elem.label) {
        for (k = 0, len3 = elem.set.length; k < len3; k += 1) {
          key = elem.set[k].key;
          value = elem.set[k].value;
          finishes[j][key] = value;
        }
      }
    }
  }
  return finishes;
}

console.log(update([{
  label: 'Barn Red',
  set: [{
    key: 'exclusion1',
    value: 'Metal Values1'
  }, {
    key: 'exclusion2',
    value: 'Metal Values2'
  }]
}]));

To make it as patible with your concept of

UPDATE wheelFinishes WHERE label="Barn Red" SET exclusion="Metal Values"

and to make it as loosely coupled/independent as possible, here is a function that might help you:

    var finishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
    ];

    var wheelFinishes = finishes;

    function update(table, searchItem, setValue) {
        function search(table) {
            if(table.label == searchItem) {
                table.exclusion = setValue;
            }
        }

        table.find(search);
    }

    update(wheelFinishes, 'Barn Red', 'Metal Values');

    console.log(wheelFinishes[2]);

Result: Object {label: "Barn Red", exclusion: "Metal Values"}

Note that, unlike map(), this only works for the first item with {label: 'Barn Red'} in an array.

As suggested by @RobertRocha:

var wheelFinishes = finishes.slice();
wheelFinishes.find(function (finish) {
  return finish.label === 'Barn Red';
}).exclusion = 'Metal Values';

This copies the array using slice, then finds the item with .label === 'Barn Red'.

In ES6:

const wheelFinishes = finishes.slice();
wheelFinishes
  .find(finish => finish.label === 'Barn Red')
  .exclusion = 'Metal Values';

You could use e.g. a regular forEach for this:

var finishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];
  
finishes.forEach(function(f) {
  if(f.label === 'Barn Red') {
    f.exclusion = 'Metal Values';
  }  
});
  
console.log(finishes);