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>

nothing appeared in the console. the error was `error: [$injector:unpr] Unknown provider: $htmlProvider <- $html <- myCont` — winsticknova, Jun 24 '16 at 18:53

score 5 · Accepted Answer · edited Jun 24 '16 at 19:02

5

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) {

edited Jun 24 '16 at 19:02

Kalu Singh Rao

1,671
1
16
21

answered Jun 24 '16 at 18:49

Pankaj Parkar

134,766
23
234
299

yeah that worked! don't know why I was typing `$html` – winsticknova Jun 24 '16 at 18:57
I think you are missed $html – Kalu Singh Rao Jun 24 '16 at 19:08

score 0 · Answer 2 · answered Jun 24 '16 at 18:58

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");
            });
});

score 0 · Answer 3 · answered Jul 25 '17 at 22:06

0

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

answered Jul 25 '17 at 22:06

Jeff

2,794
8
30
35

Load JSON file using AngularJS

3 Answers3