Knockout JS : replace specific field value in multi dimentional array

Question

I want to replace specific field value in multi dimentional array. I tried to replace it by replace function.

But, there are maybe something wrong in syntax structure. So, I can't replace it.

This below array display in console when I check my ko observable array.

0 : {id: "1", title: "IT Manager", "description" : "description 1"}
1 : {id: "2", title: "Manager", "description" : "description 2"}

I want to change value dynamically like in 1 index array want to change like from description 2 to description 3.

on keyup, I call this below function and get current parent data :

changeQty : function(itemIndex){

                self.displayProductData.splice(4,self.displayProductData()[itemIndex.id], newQtyVal);

            },

How to do that ?

Please help me.

I updated my answer so that it can replace the object no matter what the id is. Not sure if you saw chat. — Ray
– Ray, Commented Sep 14, 2018 at 14:19

Ray · Accepted Answer · 2018-09-14 14:18:31Z

1

If you try to replace a specific property of an object in an observable array, it will not work, because those properties themselves are not observables.

You have 2 choices:

Make every property of every object that can be updated an observable. If you choose this option read this question.
Replace the entire object itself.

You mentioned that replace didn't work. Did you do it like this?

var viewModel = function(){
  var self = this;
  
  //demo
  var itemIndex = {
    id:1
  }
  
  self.displayProductData = ko.observableArray([
    {id: 0, description: 'desc 1'},
    {id: 1, description: 'desc 2'}
  ]);
  self.replaceObject = function(data, event){
    var oldObject = self.displayProductData().find(function(arrayObject){ 
        return data.id === arrayObject.id; 
      });
    var newObject = Object.assign({}, oldObject);
    newObject.description = "replace method desc";
    self.displayProductData.replace(oldObject, newObject);
  };
  
  self.replaceObjectWithSplice = function(data, event){
    var oldObject = self.displayProductData().find(function(arrayObject){ 
      return data.id === arrayObject.id; 
    });
    var newObject = Object.assign({}, oldObject);
    newObject.description = "splice desc";
    self.displayProductData.splice(data.id, 1, newObject);
  };
};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>



<ul data-bind="foreach: displayProductData">
    <li>
      <span data-bind="text: id"></span>, 
      <span data-bind="text: description"></span>
      <button data-bind="click: $parent.replaceObject">Replace</button>
      <button data-bind="click: $parent.replaceObjectWithSplice">Splice</button>
    </li>
</ul>

Note: My answer is not the most efficient way to go if you are replacing a lot of data - it takes extra memory to create new objects every time.

Edit: Based on comments, I've moved the buttons to inside the foreach loop to show that when you call a function from within Knockout object (in this case displayProductData) the function automatically gets the current row data, as well as the event.

edited Sep 14, 2018 at 14:18

answered Sep 14, 2018 at 7:53

Ray

3,9927 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Keval Mehta Over a year ago

Almost need to change data in 1 or 2 index. Your snippet is proper output as I want. But, you mention here that It will take extra memory to create new object. So, It will affect in response speed also?

Keval Mehta Over a year ago

If I can use splice for replace data in existing array then can you edit splice code also?

Ray Over a year ago

It will affect response speed only if you are dealing with large amounts of data (several 100s of objects). Otherwise don't worry about it :) I added the splice method as well to the answer

Ray Over a year ago

If you're worried about response speed, look at this. It takes over 1 million records to create any significant delay.

Keval Mehta Over a year ago

Can I get appropriate array index number in changeQty() function ? Because, I need to pass dynamic itemIndex Id in replace

|

Collectives™ on Stack Overflow

Knockout JS : replace specific field value in multi dimentional array

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related