Load JSON file using AngularJS

javascript html angularjs json

15,659

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

myMod.controller("myCont", function ($scope, $http) {

15,659

Author by

winsticknova

Updated on July 07, 2022

Comments

winsticknova almost 2 years

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>