使用 $http 获取 JSON 数据

Question

我正在尝试使用 $http 函数获取 JSON 数据；我总是为此出错。这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
   <li ng-repeat="x in code">
     {{ x.code }}
   </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("data.json")
   .success(function (response) {$scope.code = response;})
   .error(function (response) {alert("Error")})
});
</script>

</body>
</html>

这是我的 data.json 文件：

{
  "code":"#include <stdio.h>

          int main()
          {
             printf('Hello world');
             return 0;
          }"
}

这里是 plunker http://plnkr.co/edit/Q4dsCjHM3ykgp2SaHw35?p=preview

Answer 1

您的 JSON 格式不正确。 string 行代码应该在一行上，例如，

{
    "code": "#include <stdio.h> int main() ...."
}

您随时可以在 jsonlint.com

验证您的 JSON

Answer 2

请将您的数据更改为 below.Basically 它应该是字符串，使用 pre 标记作为换行符，然后将输入替换为 \n

{
  "code": "#include <stdio.h>\n int main()\n printf('Hello world');\n return 0;\n}"
}

HTML

<ul>
  <li ng-repeat="x in code">
    <pre>{{ x }}</pre>
  </li>
</ul>

Working Plunkr

Answer 3

您的 JSON 格式不正确。

JSON

{
  "code":"#include <stdio.h>int main(){printf('Hello world');return 0;}"
}

然后，您可以访问请求中的 code 字段：

控制器

$http.get("data.json")
  .success(function (response) {
    $scope.code = response.code;
})
.error(function (response) {
    alert("Error");
});

使用 $http 获取 JSON 数据

Getting JSON data using $http

javascript

json

http

angularjs

angular-http