javascript - 在 AngularJS 中读取 JSON 文件时出错

标签 javascript angularjs json

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

笨蛋: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

最佳答案

您的 plunker 有两个问题。首先,JSON 文件的路径错误导致 404。删除前导 / 修复了该问题。

根本问题是您的 JSON 无效。

应该是

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

您有单引号 (') 但需要使用双引号 (")。

关于javascript - 在 AngularJS 中读取 JSON 文件时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34068429/

相关文章:

javascript - 如何在 JavaScript 中保持以下异步模式 DRY?

angularjs - 使用 AngularJS 路由时有没有办法预加载模板?

javascript - AngularJS 工厂变量变得未定义

json - cxf :rsServer 的 Jackson JSON 提供程序

javascript - Angular 中的路由提供者

jquery - 如何使用 jquery/ajax 将数据发送到 json 文件

javascript - 根据多个属性(但不是全部)删除重复项

javascript - ng-options默认值需要双击选择一个值

javascript - 序列化事务批量更新,然后批量创建

javascript - Angular : Variables in ng-model