updating a json value with angular

Question

I am trying to update an json object value from a textbox using angular and I'm not sure what the best way to go about it is.

This is the json object...

   $scope.productAttributes = {
        "CostRequirements":[
            {
                "OriginPostcode": 'NW1BT',
                "BearerSize":100

            }
        ]
    }

And when a use types in a text field and clicks a button, I would like to grab that textfield value and pass it into the json object to replace the postcose value (OriginPostcode) I tried to pass in a scope variable but that didnt work.

 <input type="text" placeholder="Please enter postcode" class="form-control" ng-model="sitePostcode"/>

And this is the fucntion that is fired when the user clicks a button to submit the json

var loadPrices = function () {

        productsServices.getPrices1($scope.productAttributes)
            .then(function (res) {
                $scope.selectedProductPrices = res.data.Products;
               // $scope.selectedProductAddOns = res.data.product_addons;
            })
            .finally(function () {
                $scope.loadingPrices = false;
                $scope.loadedPrices = true;
            });
    };

Could anyone tell me what I need to do to put the user input in the textbox into the json object?

Many thanks

There seem to be components missing from your explanation... things you have in your code. Such as a controller in angular and the button to see how it's assigned to run the function. — SoluableNonagon
– SoluableNonagon, Commented Feb 6, 2015 at 16:38
Sorry - loadPrices and productAttributes are sitting in the same controller. — Jose the hose
– Jose the hose, Commented Feb 6, 2015 at 16:40
I updated my answer, it shows a way to correctly 'grab' values from scope and update a json on the click of a button. — SoluableNonagon
– SoluableNonagon, Commented Feb 6, 2015 at 16:58

SoluableNonagon · Accepted Answer · 2015-02-06 16:56:18Z

4

What we don't see is the function that runs the update with the button. It should look something like this

// your HTML button
<button ng-click='updateThingy()'>Update</button>
// your HTML input
<input type="text" ng-model="myObject.sitePostcode"/>


// your controller
$scope.myObject = { // ties to the ng-model, you want to tie to a property of an object rather than just a scope property
    sitePostcode : $scope.productAttributes.CostRequirements[0].OriginPostcode // load in post code from productAttributes
}; 

$scope.updateThingy = function(){
    $scope.productAttributes.CostRequirements[0].OriginPostcode = $scope.myObject.sitePostcode;
};

Here is a demo plunker for updating a value on button click, hope it helps out.

http://plnkr.co/edit/8PsVgWbr2hMvgx8xEMR1?p=preview

edited Feb 6, 2015 at 16:56

answered Feb 6, 2015 at 16:50

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

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

1 Comment

Jose the hose Over a year ago

Thank you very much for taking the time to create a plunker. Its working now. As you can see I have a lot to learn, but its go to know there are people like yourself willing to help out. Thanks!

Gaston Sanchez · Accepted Answer · 2015-02-06 16:39:05Z

I guess loadPrices function is inside your controller. Well, then you should have sitePostCode variable available inside your controller and your function. So you just need to inject that value inside $scope.productAttributes.

$scope.productAttributes.sitePostCode = $scope.sitePostCode;

This you need to put it before you make the productsServices.getPrices1 call.

var loadPrices = function() {
    $scope.productAttributes.sitePostCode = $scope.sitePostCode;

    productsServices.getPrices1($scope.productAttributes)
    .then(function(res) {
        $scope.selectedProductPrices = res.data.Products;
        // $scope.selectedProductAddOns = res.data.product_addons;
    })
    .finally(function() {
        $scope.loadingPrices = false;
        $scope.loadedPrices = true;
    });
};

Let me know if it worked.

But $scope.productAttributes.sitePostCode is not updating the object value 'OriginPostcode'

Collectives™ on Stack Overflow

updating a json value with angular

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related