Load JSON file using AngularJS
Question
I just started learning Angular and I've looked on SO for a solution to load a JSON file using angular and I've done what other people have posted a solutions but I cannot get the data from my json file to show for some reason.
my json file (test.json) is simple:
{
"array": [
{"thing": "thing1"},
{"thing": "thing2"},
{"thing": "thing3"}
],
"name": "robert"
}
this is my js file:
var myMod = angular.module("myMod", []);
myMod.controller("myCont", function ($scope, $http) {
$scope.thing = "hi";
$http.get("/test.json")
.success(function (data) {
$scope.stuff = data.array;
$scope.name = data.name;
})
.error(function (data) {
console.log("there was an error");
});
});
and i'm trying to just display the name like this but only {{name}} shows:
<html ng-app="myMod">
<head>
<script src="angular.js"></script>
<script src="testing.js"></script>
</head>
<body ng-controller="myCont">
{{stuff}}
</body>
</html>
3 answers
solution1
4 ACCPTED 2016-06-24 18:49:58
I think you had typo, you should inject $http (responsible to make an ajax call) dependency instead of $html (doesn't exist in angular)
You should change code this way.
myMod.controller("myCont", function ($scope, $html) {
to
myMod.controller("myCont", function ($scope, $http) {
solution2
0 2016-06-24 18:58:49
As Pankaj Parkar has stated, $http is what you need.
Here is a plunker I created with it working: http://plnkr.co/edit/d0DDU29uitMcwK6qA7kx?p=preview
app.js file with $http instead of $html:
var myMod = angular.module("myMod", []);
myMod.controller("myCont", function ($scope, $http) {
$scope.thing = "hi";
$http.get("test.json")
.success(function (data) {
$scope.stuff = data.array;
$scope.name = data.name;
})
.error(function (data) {
console.log("there was an error");
});
});
solution3
0 2017-07-25 22:06:32
If anyone trying this is getting the error:
$http.get(…).success is not a function
Apparently the syntax changed for Angular >1.6. The accepted answer here has new syntax: $http.get(...).success is not a function
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.