Javascript angularJS-无法将API Json响应数据加载到我的HTML文件中_Javascript_Jquery_Html_Angularjs_Json

Javascript angularJS-无法将API Json响应数据加载到我的HTML文件中

javascript jquery html angularjs json

Javascript angularJS-无法将API Json响应数据加载到我的HTML文件中,javascript,jquery,html,angularjs,json,Javascript,Jquery,Html,Angularjs,Json,以下是我正在使用的代码： 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(func

以下是我正在使用的代码：

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

这是我的HTML文件：

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


PCC ECAR应用程序
{{mainTask.Amount}

以下是API响应中控制台日志的屏幕截图：

当您转到页面时，元素

view1

将显示

{{maintash.Amount}

半秒钟，然后消失，留下空白元素。我显然做错了什么。为什么我不能将数据加载到HTML中？

/Tasks

端点正在返回一个任务数组。您需要执行以下操作：

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

或用于循环执行以下任务：

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

{{task.Amount}

$scope.maintash.tasks

是一个包含任务数据的数组。您可以在视图中循环使用它：

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


{{task.Amount}

这将是

mainTask.Tasks

，因为api返回了一个数组对象。这非常有效！如果数组中返回了5个不同的对象，这仍然有效。@FrankerZ。我接受了答案。我对该站点并不陌生：）你的回答太快了，以至于该站点告诉我，我必须再等10分钟才能完成任务n接受正确答案。顺便说一句，重复选项非常有效，除了在您的回答中您忘记了{{task.Amount}我更新了我的答案之后的最后一个“}”