在文本框中显示json数据

Question

我想将json数据显示到文本框中。但它没有显示在文本框中 我的代码是

  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>

我的json数据是

{"productList":[{"discountPercentage":3,"id":1054,"quantity":234,"sellingPrice":555.00,"tax1id":0,"tax1value":0,"tax2id":0,"tax2value":0,"unitPrice":234.00}]}

Answer 1

使用 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 2

试试这个

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

Answer 3

您需要迭代products.productList或指定$scope.products = response.productList。

以下是工作示例:(我使用$timeout来模拟API调用）

＆＃13;

＆＃13;

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)

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;