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>
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>
- what does your network tools show? – Daniel A. White Commented Jun 24, 2016 at 18:49
- Add a console.log in the .success to see if it is called – Eric Hartford Commented Jun 24, 2016 at 18:50
-
nothing appeared in the console. the error was
error: [$injector:unpr] Unknown provider: $htmlProvider <- $html <- myCont– winsticknova Commented Jun 24, 2016 at 18:53 - @winsticknova check at the answer added below.. – Pankaj Parkar Commented Jun 24, 2016 at 18:57
3 Answers
Reset to default 5I 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) {
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");
});
});
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