Question

我正在尝试使用$ http.get在AngularJS中读取一个json文件，并在浏览器控制台中出现一些错误。

Plunker：http://plnkr.co/edit/SDRpu1MmrTPpgpdb6Kyk?p=preview

这是我的代码

使用Javascript： -

var jayApp = angular.module('jayApp', []);

jayApp.controller('jayController', function($scope, $http){

  $scope.entities = {};

    $http.get("test.json").success(
        function(data, status, headers, config) {
            $scope.entities = data;
        }
    );
})

HTML

    <!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

    <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app='jayApp' ng-controller='jayController'>
    <h1>Read Json from file </h1>

    Data : {{entities}}
  </body>

</html>

更新

错误

SyntaxError: Unexpected token '
    at Object.parse (native)
    at fromJson (https://code.angularjs.org/1.4.7/angular.js:1252:14)
    at defaultHttpResponseTransform (https://code.angularjs.org/1.4.7/angular.js:9414:16)
    at https://code.angularjs.org/1.4.7/angular.js:9505:12
    at forEach (https://code.angularjs.org/1.4.7/angular.js:336:20)
    at transformData (https://code.angularjs.org/1.4.7/angular.js:9504:3)
    at transformResponse (https://code.angularjs.org/1.4.7/angular.js:10276:23)
    at processQueue (https://code.angularjs.org/1.4.7/angular.js:14745:28)
    at https://code.angularjs.org/1.4.7/angular.js:14761:27
    at Scope.$eval (https://code.angularjs.org/1.4.7/angular.js:15989:28)(anonymous function) @ angular.js:12477(anonymous function) @ angular.js:9246processQueue @ angular.js:14753(anonymous function) @ angular.js:14761Scope.$eval @ angular.js:15989Scope.$digest @ angular.js:15800Scope.$apply @ angular.js:16097done @ angular.js:10546completeRequest @ angular.js:10744requestLoaded @ angular.js:10685

Answer 1

你的掠夺者有两个问题。首先，JSON文件的路径错误，导致/。删除修正该问题的前导JSON。

根本问题是您的{ "name":"jay", "city":"Tanjore" }无效。

应该是

{{1}}

你有单引号（'）但需要使用double（“）。

Answer 2

这是你的JSON的一个问题，你需要把文件的路径放在没有'/'

的情况下

<强> JSON：

{
  "name":"jay",
  "city":"Tanjore"
}

<强> CODE：

$http.get("test.json").success(
    function(data, status, headers, config) {
      console.log(data);
        $scope.entities = data;
    }
);

以下是更新后的Plunker

Answer 3

无效的JSON ......应该是：

{
  "name":"jay",
  "city":"Tanjore"
}

此外，在您的Plunk上，您正在拨打错误的地方（在test.json之前删除/。）

$ http.get（“test.json”）。success（...

Answer 4

正如我在你的json文件中看到的，你有一些语法错误是你的第一个主要错误，所以解释器无法读取json数据。答：我刚刚为你的**keys**添加了双引号 B.我将你所有的json对象都包含在卷曲的brakets **{}**
您无法解析已经是json对象的文件，在对其进行字符串化时解析json文件。所以，我删除了解析词＆＃39;我就这样离开了：
```
    $http.get("test.json").success(
        function(data, status, headers, config) {
            $scope.entities =data;  
        }
     );
```

固定的plunker示例：http://plnkr.co/edit/G5Y62tQuJit3ZvjHbKQ8?p=preview

我没有为你的所有键添加双引号，因为它们太多，但它足以理解你的错误。希望有助于好运。

在AngularJS中读取JSON文件时出错

4 个答案: