admin管理员组文章数量:1377546
I am trying to read a json file in AngularJS using $http.get and get some errors in browser console.
Plunker :
Here is my code
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="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="[email protected]" data-semver="1.11.3" src=".11.3.min.js"></script>
<script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="1.4.7" src=".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>
Update:
Error
SyntaxError: Unexpected token '
at Object.parse (native)
at fromJson (.4.7/angular.js:1252:14)
at defaultHttpResponseTransform (.4.7/angular.js:9414:16)
at .4.7/angular.js:9505:12
at forEach (.4.7/angular.js:336:20)
at transformData (.4.7/angular.js:9504:3)
at transformResponse (.4.7/angular.js:10276:23)
at processQueue (.4.7/angular.js:14745:28)
at .4.7/angular.js:14761:27
at Scope.$eval (.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:10546pleteRequest @ angular.js:10744requestLoaded @ angular.js:10685
I am trying to read a json file in AngularJS using $http.get and get some errors in browser console.
Plunker : http://plnkr.co/edit/SDRpu1MmrTPpgpdb6Kyk?p=preview
Here is my code
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="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn./bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn./font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery./jquery-1.11.3.min.js"></script>
<script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs/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>
Update:
Error
SyntaxError: Unexpected token '
at Object.parse (native)
at fromJson (https://code.angularjs/1.4.7/angular.js:1252:14)
at defaultHttpResponseTransform (https://code.angularjs/1.4.7/angular.js:9414:16)
at https://code.angularjs/1.4.7/angular.js:9505:12
at forEach (https://code.angularjs/1.4.7/angular.js:336:20)
at transformData (https://code.angularjs/1.4.7/angular.js:9504:3)
at transformResponse (https://code.angularjs/1.4.7/angular.js:10276:23)
at processQueue (https://code.angularjs/1.4.7/angular.js:14745:28)
at https://code.angularjs/1.4.7/angular.js:14761:27
at Scope.$eval (https://code.angularjs/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:10546pleteRequest @ angular.js:10744requestLoaded @ angular.js:10685
- What are the errors? – jcubic Commented Dec 3, 2015 at 14:23
- @jcubic Thanks I have updated with errors. – Jay Commented Dec 3, 2015 at 14:27
- 1 You can use jsoneditoronline to verify your JOSN – Vlada Commented Dec 3, 2015 at 14:58
4 Answers
Reset to default 7Your plunker had two issues. first the path to the JSON file was wrong resulting in a 404. Remove the leading / fixed that issue.
The root problem is your JSON is invalid.
It should be
{
"name":"jay",
"city":"Tanjore"
}
you had single quotes (') but need to use double (").
It's an issue with your JSON and you need to put the Path of the file without '/'
JSON:
{
"name":"jay",
"city":"Tanjore"
}
CODE:
$http.get("test.json").success(
function(data, status, headers, config) {
console.log(data);
$scope.entities = data;
}
);
Here is the updated Plunker
Invalid JSON... Should be:
{
"name":"jay",
"city":"Tanjore"
}
Also, on your Plunk you are making the call to the wrong place (get rid of the / before test.json).
$http.get("test.json").success( ...
as i see into your json file ,you have some syntax errors that is your first main error, so the interpreter cannot read the json data. A. i just added double quotes to your
**keys**and B. i enclosed all your json object into curly brakets**{}**you cant parse a file that is already json object, you parse a json file when you stringify it. So, i remove the 'parse word' and i leave it like this:
$http.get("test.json").success( function(data, status, headers, config) { $scope.entities =data; } );
fixed plunker example: http://plnkr.co/edit/G5Y62tQuJit3ZvjHbKQ8?p=preview
i didnt add double quotes to all your keys because they too many , but it is enough to understand your mistake. hope helps good luck.
本文标签： javascriptError reading JSON file in AngularJSStack Overflow
版权声明：本文标题：javascript - Error reading JSON file in AngularJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744394603a2604152.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论