I have an object array as follows:

products = [
  {
    id: 1,
    title: "Product 1",
    specifications: {
      price: 1.55,
      discount: 15,
      attributes: [
        {
          l1: 100,
          l2: 80
          height:200,
          weight: 15,
          parameters: [
            {
              id: 199199 // this is how I identify the parameter
              size: 185 // this is what I want to change
            }, ... 
          ]    
        }, ...
      ]

    }
  }, ...
]

... and an array of changes to parameters I want to apply, for example: change size to 189 where product.specifications.attributes.parameters.id == 199199.

I'd like to do this without flattening any elements as they are part of a Vue.js data structure, it will break the reactivity.

How could I do this? I am open to using Underscore or lo-dash

I have an object array as follows:

products = [
  {
    id: 1,
    title: "Product 1",
    specifications: {
      price: 1.55,
      discount: 15,
      attributes: [
        {
          l1: 100,
          l2: 80
          height:200,
          weight: 15,
          parameters: [
            {
              id: 199199 // this is how I identify the parameter
              size: 185 // this is what I want to change
            }, ... 
          ]    
        }, ...
      ]

    }
  }, ...
]

... and an array of changes to parameters I want to apply, for example: change size to 189 where product.specifications.attributes.parameters.id == 199199.

I'd like to do this without flattening any elements as they are part of a Vue.js data structure, it will break the reactivity.

How could I do this? I am open to using Underscore or lo-dash

• javascript
• underscore.js
• vue.js
• lodash

Share Improve this question Follow edited Nov 21, 2016 at 3:36 Nick M asked Nov 21, 2016 at 3:29 Nick MNick M 2,53255 gold badges3535 silver badges6060 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This looks ugly, but it is effective:

To make it more dynamic, let's use variables: identifier will be your '199199' value and new_size for the '189' value.

methods: {
    updateRecord: function(identifier, new_size) {
        this.products.map(function(product) {   
            product.specifications.attributes.map(function(attribute)           {
                attribute.parameters.map(function(parameter) {
                    if (parameter.id == identifier) parameter.size = new_size;
                })
            });
        });
    }
}

Here is a working fiddle: https://jsfiddle/crabbly/eL7et9e8/

_.forEach(products, function(product) {
    _.forEach(_.get(product, 'specifications.attributes', []), function(attribute) {
        _.set(_.find(attribute.parameters, {id: 199199}), 'size', 189);
    });
});

I believe what you want is underscore's findIndex() - http://underscorejs/#findIndex. Once you find which element in the array you want to apply the changes to (paring the nested id to what you are looking for) you can then make the change to that particular element.