Replacing an object in array

Question

I have created a jsfiddle to demostrate my problem

`http://jsfiddle.net/hin123/tcVhN/129/`

I have the add and delete button working in this example, but it seems I cannot find do the edit button. I am not sure what is wrong, help will be appreciated

Your question is not clear. If you are pushing an object in an array, how can you replace the object? — Abhishek Prakash
– Abhishek Prakash, Commented Jul 23, 2015 at 17:32
@AbhishekPrakash, sorry for the confusion, I should clear it up. I push an object in an array which then showed in the list view.Then in my list view, I redirect the list item to a edit form to display my object's detail and in this form there is an save button which can save my edited object's detail — Easy Money
– Easy Money, Commented Jul 23, 2015 at 17:35

Abhishek Prakash · Accepted Answer · 2015-07-24 03:06:27Z

1

I believe you must be using ng-repeat to render the list, and each list item must be having some edit button. On the click of the button you must be routing to the edit page.

The best thing will be to update the object at that index, instead of pushing a new object in the array.

You can update the factory's updateData method to something like this -

updateData: function (index, changedObj) {
    //merge the tempData object at position index and changedObject obj
    angular.extend(tempData[index], changedObject);
}

edited Jul 24, 2015 at 3:06

answered Jul 23, 2015 at 17:41

Abhishek Prakash

9642 gold badges10 silver badges24 bronze badges

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

9 Comments

Easy Money Over a year ago

Thank you for your reply. I have got both list view and edit button working. I have this code pen example codepen.io/ionic/pen/JsHjf . What I am struggling now is after I clicked the edit button, it will bring up a edit form which include each list's detail and a save button. I am struggling with the save button to save the form details. I need some help with the code here to save the details. Thanks

Abhishek Prakash Over a year ago

Where are you caching your array? In a service?

Easy Money Over a year ago

Yes, it is in a sercice, i call my service as WebApi. To get all the array, I have a array in like this var tempData =[] in the service and then to return it, I have a function getAll: function({ return tempData}) something like this

Easy Money Over a year ago

Can I do something like this in the savebutton?tempData.splice(index, 1); tempData.splice(index, 0, newUpdateData); and in my service i return something like getUpdateData: function(newUpdateData) { tempData = newUpdateData})

Easy Money Over a year ago

Hi Abhishek Prakash, I have created the plunker here, can you show me how to do it in this plunker? plnkr.co/edit/6xUhmd8SosOjGGZmOTrD?p=preview

|

Noah Freitas · Accepted Answer · 2015-07-24 02:07:41Z

0

If you are data-binding the values of the record that the user is editing, then your save function could be as simple as:

$scope.save = function () {
    WebApi.updateData($scope.tempData);
};

This will only work, of course, if WebApi.updateData can detect changes in existing objects. (In your example, setting tempData back to itself preserves the changes on the data-bound object.)

To setup the data-binding on the edit page, you might store the edited object on the scope ($scope.editedRecord) and then do something like:

<input type="text" ng-model="editedRecord.customerName">

And so on for each property of the edited record you are exposing.

answered Jul 24, 2015 at 2:07

Noah Freitas

17.5k11 gold badges53 silver badges67 bronze badges

2 Comments

Easy Money Over a year ago

Hi Noah, thank you for your reply, so will you do something like this in the controller? $scope.editedRecord = function (data) { $scope.tempData.push(data) }

Noah Freitas Over a year ago

It will depend on how exactly you are transitioning from your list page to the edit page, but in my snippets above, I assume that $scope.editedRecord is one of the objects from tempData (like your example object: {id: 0, owner: "Amy", claimType: "Others", customerName: ABC Company}). Your form would data-bind customerName (for instance) so that it would display "ABC Company" and allow the user to change it. My snippet shows a text box, but you could of course also us a select with predefined options.

Collectives™ on Stack Overflow

Replacing an object in array

2 Answers 2

9 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Related