angularJS - Unable to load API Json response data into my HTML file

Question

Here is the code that I am using:

angular.module('ngApp', [])
.factory('authInterceptor', authInterceptor)
.constant('API', 'http://myserver.com/app/api')
.controller('task', taskData)

function taskData($scope, $http, API) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });
}

Here is my HTML file:

<html>

  <head>
    <title>PCC ECAR App</title>

    <link href="../app.css" rel="stylesheet" />
  </head>

  <body ng-app="ngApp" ng-controller="task" class="">

    <div class="view1"> {{mainTask.Amount} </div>

    <!-- Third Party Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

    <!-- Main App Script -->
    <script src="../app/app.js"></script>

  </body>
</html>

Here is a screenshot of the console log from the API response:

What is happening is when you go to the page, the element view1 will show {{mainTask.Amount}} for a half a second and then disappear leaving the element blank. I am obviously doing something wrong. Why cant I load the data into the HTML?

@FrankerZ. I did accept the answer. I'm not new to the site :) You just answered so fast that the site told me I had to wait another 10 minutes before I can accept a right answer. BTW the repeat option works awesome except in your response you forgot the last " } " after {{task.Amount} — agon024
– agon024, Commented Jul 25, 2016 at 18:00

AJ Meyghani · Accepted Answer · 2016-07-25 17:45:57Z

1

$scope.mainTask.tasks is an array that has your tasks data. You can loop through it in the view:

<ul>
  <li ng-repeat="task in mainTask.tasks">{{task.Amount}}</li>
</ul>

edited Jul 25, 2016 at 17:45

answered Jul 25, 2016 at 17:27

AJ Meyghani

4,6891 gold badge34 silver badges36 bronze badges

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

1 Comment

Blue Over a year ago

It would be mainTask.Tasks as the api returns an object of arrays.

Blue · Accepted Answer · 2016-07-25 18:01:23Z

0

The /Tasks endpoint is returning an array of tasks. You would need to do:

$scope.mainTask = data.Tasks[0];

Or use ng-repeat to loop through the tasks:

<div class="view1" ng-repeat="task in mainTask.Tasks"> {{task.Amount}} </div>

edited Jul 25, 2016 at 18:01

answered Jul 25, 2016 at 17:25

Blue

23k7 gold badges69 silver badges102 bronze badges

1 Comment

agon024 Over a year ago

that worked perfectly! and that will still work if there is 5 different objects being returned in the array.

Collectives™ on Stack Overflow

angularJS - Unable to load API Json response data into my HTML file

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related