Importing a JSON on angularJS with $http.get

Question

Im learnign angularJs, and i want to import an array from a json on my controller Like that:

myApp.controller("demoCtrl", function ($scope, $http) {

            var promise = $http.get("todo.json");

            promise.then(function (data) {
                $scope.todos = data;
            });


        });

and im using a table to display the data on todos:

<table class="table">
            <tr>
                <td>Action</td>
                <td>Done</td>
            </tr>
            <tr ng-repeat="item in todos">
                <td>{{item.action}}</td>
                <td>{{item.done}}</td>
            </tr>
        </table>

and this results on the flowing html page:

<!DOCTYPE html>
<html ng-app="demo">

<head>
    <title>Example</title>
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <link href="../css/bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script type="text/javascript">

        var myApp = angular.module("demo", []);

        myApp.controller("demoCtrl", function ($scope, $http) {

            var promise = $http.get("todo.json");

            promise.then(function (data) {
                $scope.todos = data;
            });



        });
    </script>
</head>

<body ng-controller="demoCtrl">
    <div class="panel">
        <h1>To Do</h1>
        <table class="table">
            <tr>
                <td>Action</td>
                <td>Done</td>
            </tr>
            <tr ng-repeat="item in todos">
                <td>{{item.action}}</td>
                <td>{{item.done}}</td>
            </tr>
        </table>
    </div>
</body>

Are there errors on the console (browser)? are 'ng-app', 'ng-controller' there in the html body? — Mostav
– Mostav, Commented Apr 9, 2020 at 23:33
@Mostav I notice that i forgot the ng-app, but I fixed that, and now just show empty <td> tags — miguel__frtt
– miguel__frtt, Commented Apr 10, 2020 at 0:14
Can you post the whole html and js file if possible? question without all necessary elements will not help at all. — Mostav
– Mostav, Commented Apr 10, 2020 at 0:15

gavgrif · Accepted Answer · 2020-04-10 02:36:46Z

1

The normal way of getting access to the json is from the data within the returned object from the http request - you are tying to use the entire returned object.

I use "response" as the return from the get request - then the data is "response.data". This is needed because there are other properties returned within the response object from the get request.

Try changing your promise to be as follows:

promise.then(function (response) {
   $scope.todos = response.data;
});

Also you should be having a thead and th's and tbody in the table to show a more semantically correct table

<table class="table">
   <thead>
     <tr>
       <th scope="col">Action</th>
       <th scope="col">Done</th>
      </tr>
   </thead>
   <tbody>
      <tr ng-repeat="item in todos">
          <td>{{item.action}}</td>
          <td>{{item.done}}</td>
       </tr>
    </tbody>
   </table>

edited Apr 10, 2020 at 2:36

answered Apr 10, 2020 at 0:52

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gavgrif Over a year ago

Glad to help - if you can mark the answer as accepted so that other devs know the issues has been resolved. Happy coding

xdeepakv · Accepted Answer · 2020-04-10 02:43:48Z

0

Promise return entire response in callback Data is in response.data

myApp.controller("demoCtrl", function ($scope, $http) {
  var promise = $http.get("todo.json");
  // Entire response in callback
  promise.then(function (response) {
    $scope.todos = response.data; // Data is in response.data
  });
});

More: https://docs.angularjs.org/api/ng/service/$http

answered Apr 10, 2020 at 2:43

xdeepakv

8,1452 gold badges25 silver badges35 bronze badges

Collectives™ on Stack Overflow

Importing a JSON on angularJS with $http.get

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related