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

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

• javascript
• json
• angularjs

• There seem to be ponents 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 Commented Feb 6, 2015 at 16:38
• Sorry - loadPrices and productAttributes are sitting in the same controller. – 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 Commented Feb 6, 2015 at 16:58

2 Answers 2

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

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.