在AngularJS中读取JSON文件时出错

Question

在AngularJS中读取JSON文件时出错

我试图使用$ 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;
        }
    );
})

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

更新:

错误

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

ste*_*425 7

你的掠夺者有两个问题.首先,JSON文件的路径是错误的,导致a 404.删除领先/修复该问题.

根本问题是你JSON的无效.

它应该是

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

Run Code Online (Sandbox Code Playgroud)

你有单引号(')但需要使用double(").

归档时间：	10 年前
查看次数：	1130 次
最近记录：	10 年前