AngularJS http get json

AngularJS http get json

本文关键字：json get http AngularJS      更新时间：2023-09-26

第一次尝试使用AngularJS获取json数据并将其绑定到我的表单。我能够以这种方式绑定json，但它需要我手动匹配"数据"到我的html中的每个项目。

从我的控制器的http调用:

  $http.get('static.json').
    success(function(data, status, headers, config) {
      // here I have to manually copy all my json to bind with "data"
      $scope.SiteID = data.SiteID;
      $scope.SiteCode = data.SiteCode;
  }).
  error(function(data, status, headers, config) {
    // log error
  });

我的json: 

{
  "SiteID":"mySiteIDGoesHere",
  "SiteCode":"mySiteCodeGoesHere"
}

是否有一种方法可以自动绑定我的json，而不必手动通过每个项目?如:

  $http.get('static.json').
    success(function(data, status, headers, config) {
      "just pull in whatever my json is and bind it"
      $scope.WhateverIsInJSONID = data.WhateverIsInJSONID;
      $scope.WhateverIsInJSONCode = data.WhateverIsInJSONCode;
  }).
  error(function(data, status, headers, config) {
    // log error
  });

在success函数中，将数据绑定到$scope。数据如下:

$scope.data = data

然后-在你的html中，你所有的ng-models, ng-values等将被这样绑定:

<p>{{data.someKey}}</p><img ng-src="data.imgSrc" />....

此外，以任意方式将许多键绑定到作用域是不安全的。我指的不是偶尔添加到作用域的数据或其他东西。但是，当盲目地迭代对象并将每个键绑定到$scope时，您可能会覆盖已经设置的其他键，或者稍后在控制器中覆盖您设置的键。也许您有一个附加到作用域的函数被盲目赋值覆盖，反之亦然。

您可以直接设置$scope.data = data;…

然后在您的视图中，您可以访问data.SiteID或data.SiteCode等

如前所述，您可以简单地将$scope上的项设置为data，然后使用点标记法引用它，如:

$scope.data = data;

然后:

<span>{{data.WhateverIsInJSONID}}</span>

如果你想要$scope上的每个属性单独，你必须循环它们并添加它们，像:

for (var property in data) {
  if (data.hasOwnProperty(property)) {
    $scope[property] = data[property];
  }
}

就是$scope.WhateverIsInJSONID和$scope.WhateverIsInJSONCode

No。在angular中，你必须在控制器中一个接一个地将数据放入scope($scope)中，然后你可以在HTML中{{blah}}或使用ng-models指令，ng-values等来访问它们。

相关文章：