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

【问题标题】：angularJS - Unable to load API Json response data into my HTML fileangularJS - 无法将 API Json 响应数据加载到我的 HTML 文件中
【发布时间】：2016-07-25 17:23:51
【问题描述】：

这是我正在使用的代码：

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>

这是来自 API 响应的控制台日志的屏幕截图：

当你转到页面时，元素view1 将显示{{mainTask.Amount}} 半秒钟然后消失，留下空白元素。我显然做错了什么。为什么我不能将数据加载到 HTML 中？

【问题讨论】：

@FrankerZ。我确实接受了答案。我对这个网站并不陌生 :) 你的回答太快了，以至于网站告诉我我必须再等 10 分钟才能接受正确的答案。顺便说一句，重复选项的效果很棒，除了在您的回复中您忘记了 {{task.Amount} 之后的最后一个“}”
我更新了答案

标签： javascript jquery html angularjs json

【解决方案1】：

$scope.mainTask.tasks 是一个包含您的任务数据的数组。你可以在视图中循环遍历它：

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

【讨论】：

它将是mainTask.Tasks，因为 api 返回一个数组对象。

【解决方案2】：

/Tasks 端点正在返回一个任务数组。你需要这样做：

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

或使用ng-repeat 循环执行任务：

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

【讨论】：

效果很好！如果数组中返回 5 个不同的对象，这仍然有效。