Question

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country + ', ' + x.City  }}
</li>
</ul>
<p ng-repeat="y in localnames">{{ y.Adrs + ', ' + y.Place + ', ' + y.Country  }}</p>
</div>

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.json")
  .success(function (response) {$scope.names = response.records;});
  .success(function (response) {$scope.localnames =   response.locrecords;});
});

//JSON
{
"records":[
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]

"locrecords":[
    {"Adrs":"My Address","Place":"Mavelikara","Country":"India"},
    {"Adrs":"My Address","Place":"Mavelikara","Country":"India"}
]
}

我正在尝试使用Angular.js将JSON数据加载到HTML。添加第二个数组后为什么不能正常工作？删除$scope.localnames时，它确实有效。

使用的数据和HTML位于：https://drive.google.com/file/d/0B4DOAWmRNQn1cGNEWVRqOU9xUVE/view?usp=sharing

Answer 1

您的javascript代码中出现语法错误。你应该删除额外的;：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.json")
  .success(function (response) {$scope.names = response.records;})
  .success(function (response) {$scope.localnames =   response.locrecords;});
});

Answer 2

您违反了$http链接。

$http.get("customers.json")
  .success(function (response) {$scope.names = response.records;}); <-- remove ;
  .success(function (response) {$scope.localnames = response.locrecords;});

此外，您的JSON已损坏。您在,数组后缺少records（逗号）。

<强> JSON

{
"records":[
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
],

"locrecords":[
    {"Adrs":"My Address","Place":"Mavelikara","Country":"India"},
    {"Adrs":"My Address","Place":"Mavelikara","Country":"India"}
]
}

Answer 3

你的问题的答案。您的JSON无效。您错过了记录和刻记之间的,。格式化代码有助于; - ）

{
 "records": [{
   "Name": "Alfreds Futterkiste",
   "City": "Berlin",
   "Country": "Germany"
 }, {
   "Name": "Comércio Mineiro",
   "City": "São Paulo",
   "Country": "Brazil"
 }],

 "locrecords": [{
   "Adrs": "My Address",
   "Place": "Mavelikara",
   "Country": "India"
 }, {
   "Adrs": "My Address",
   "Place": "Mavelikara",
   "Country": "India"
 }]
}

Answer 4

修复JSON和HTML

HTML

$http.get("customers.json")
 .success(function (response) {
   $scope.names = response.records;
   $scope.localnames = response.locrecords;
});

JSON

{
 "records":[
  {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
  {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
 ],
 "locrecords":[
  {"Adrs":"My Address","Place":"Mavelikara","Country":"India"},
  {"Adrs":"My Address","Place":"Mavelikara","Country":"India"}
 ]
}

Answer 5

它的数组，我想你必须像下面这样打电话， $ scope.localnames = response.locrecords [0]

如果它不起作用，那么你应该在它上面调用parseJSON（data [0]）。

谢谢，萨姆拉特萨卡博客：coderstutorial.blogspot.com

发出通过AngularJs加载json数据的问题

5 个答案: