Showing json data in textbox - angularjs

Question

I want to show json data to text box. but it is not showing in text box
my code is
var app = angular.module('productApp', []);
app.controller('productController', function($scope, $http) {
var x = 1054;
alert(x);
$http({
method: 'GET',
url: 'getProduct',
params: {
id: x
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(response, status, headers, config) {
console.log(response);
$scope.products = response;
})
.error(function(data, status, headers, config) {
alert("Opps unable to connect to server");
});
}); <
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div class="container">
<div class="all-data" ng-app="productApp" ng-controller="productController">
<form id="updateProduct" action="UpdatedProduct" method="post">
<legend>Update Product</legend>
<div class="products" ng-repeat="p in products">
{{p.id}}{{p.unitPrice}}
<input type="hidden" ng-model="p.id" />
<label>Bar Code</label>
<input type="text" name="barCode" class="form-control" id="barCode" ng-model="p.barcode" />
<label> Quantity </label>
<input type="text" name="quantity" ng-model="p.quantity" class="form-control" id="quantity" />
<label>Unit Price</label>
<input type="text" name="unitPrice" ng-model="p.unitPrice" class="form-control" id="unitPrice" />
<label>Selling Price</label>
<input type="text" name="sellingPrice" class="form-control" id="sellingPrice" ng-model="p.sellingPrice" data-validation="required" data-validation-error-msg="Selling price required" />
<label>Discount Percentage</label>
<input type="text" name="discountPercentage" class="form-control" id="discountPercentage" ng-model="p.discountPercentage" />
<label>Tax1</label>
<input type="text" name="tax1name" class="form-control" id="tax1name" ng-model="p.tax1.name" />
<input type="hidden" name="tax1id" class="form-control" id="tax1id" ng-model="p.tax1.id" />
<input type="hidden" name="tax1value" class="form-control" id="tax1val" ng-model="p.tax1.value" />
<label>Tax2</label>
<input type="text" name="tax2name" class="form-control" id="tax2name" ng-model="p.tax2.name" />
<input type="hidden" name="tax2id" class="form-control" id="tax2id" ng-model="p.tax2.id" />
<input type="hidden" name="tax2value" class="form-control" id="tax2val" ng-model="p.tax2.value" />
<button type="submit" class="form-control btn btn-success" style="margin-top: 10px" ng-click="update(p)">Update</button>
</div>
</div>
my json data is
{"productList":[{"discountPercentage":3,"id":1054,"quantity":234,"sellingPrice":555.00,"tax1id":0,"tax1value":0,"tax2id":0,"tax2value":0,"unitPrice":234.00}]}

Answer 1

Try this one
}).success(function(response, status, headers, config) {
console.log(response);
$scope.products = response.productList;
})

Answer 2

Use response.data.productList,
$http({
method: 'GET',
url: 'getProduct',
params: {
id: x
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(response, status, headers, config) {
console.log(response);
$scope.products = response.data.productList;
})
.error(function(data, status, headers, config) {
alert("Opps unable to connect to server");
});

Answer 3

You either need to iterate over products.productList or, assign $scope.products = response.productList.
Here's working example: (I have used $timeout to simulate API call)
var app = angular.module('productApp', []);
app.controller('productController', function($scope, $timeout) {
var x = 1054;
alert(x);
$timeout(function() {
$scope.products = {
"productList": [{
"discountPercentage": 3,
"id": 1054,
"quantity": 234,
"sellingPrice": 555.00,
"tax1id": 0,
"tax1value": 0,
"tax2id": 0,
"tax2value": 0,
"unitPrice": 234.00
}]
}
}, 1000)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div class="container">
<div class="all-data" ng-app="productApp" ng-controller="productController">
<form id="updateProduct" action="UpdatedProduct" method="post">
<legend>Update Product</legend>
<div class="products" ng-repeat="p in products.productList">
{{p.id}}{{p.unitPrice}}
<input type="hidden" ng-model="p.id" />
<label>Bar Code</label>
<input type="text" name="barCode" class="form-control" id="barCode" ng-model="p.barcode" />
<label> Quantity </label>
<input type="text" name="quantity" ng-model="p.quantity" class="form-control" id="quantity" />
<label>Unit Price</label>
<input type="text" name="unitPrice" ng-model="p.unitPrice" class="form-control" id="unitPrice" />
<label>Selling Price</label>
<input type="text" name="sellingPrice" class="form-control" id="sellingPrice" ng-model="p.sellingPrice" data-validation="required" data-validation-error-msg="Selling price required" />
<label>Discount Percentage</label>
<input type="text" name="discountPercentage" class="form-control" id="discountPercentage" ng-model="p.discountPercentage" />
<label>Tax1</label>
<input type="text" name="tax1name" class="form-control" id="tax1name" ng-model="p.tax1.name" />
<input type="hidden" name="tax1id" class="form-control" id="tax1id" ng-model="p.tax1.id" />
<input type="hidden" name="tax1value" class="form-control" id="tax1val" ng-model="p.tax1.value" />
<label>Tax2</label>
<input type="text" name="tax2name" class="form-control" id="tax2name" ng-model="p.tax2.name" />
<input type="hidden" name="tax2id" class="form-control" id="tax2id" ng-model="p.tax2.id" />
<input type="hidden" name="tax2value" class="form-control" id="tax2val" ng-model="p.tax2.value" />
<button type="submit" class="form-control btn btn-success" style="margin-top: 10px" ng-click="update(p)">Update</button>
</div>
</div>