Question

我从我制作的API中获得了一些json并且它正在运行。样品响应如下：

[{"id":"1","item":"Factory New AWP Asiimov","bids":"21","price":"0.21","itempic":"http:\/\/steamcommunity-a.akamaihd.net\/economy\/image\/fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz56I_OKMyJYcxPSPqFNVfg14jfhDCM7_cpcWNak8L5ILF3ot4SXMeMtY95MTcDZCPbSNACpuUo6hvNYfJCLoS3vjn_taDtZUw2rpDytVfjhQg\/360fx360f","endtime":"2015-07-02 03:18:49","sold":"1","winner":"76561198173814231","created_at":"2015-07-03 00:23:02","updated_at":"2015-07-04 05:08:38","current":"25.04","daysago4":"23.76","daysago8":"23.99","daysago12":"24.95","daysago16":"24.15"},{"id":"27","auctionid":"11","steamid":"76561198173814231","created_at":"2015-07-07 05:04:47","updated_at":"2015-07-07 05:04:47"},{"id":"26","auctionid":"11","steamid":"76561198173814231","created_at":"2015-07-07 05:04:35","updated_at":"2015-07-07 05:04:35"},{"id":"25","auctionid":"1","steamid":"76561198173814231","created_at":"2015-07-04 05:08:38","updated_at":"2015-07-04 05:08:38"},{"id":"24","auctionid":"5","steamid":"76561198173814231","created_at":"2015-07-04 05:08:30","updated_at":"2015-07-04 05:08:30"},{"id":"23","auctionid":"5","steamid":"76561198173814231","created_at":"2015-07-04 05:08:29","updated_at":"2015-07-04 05:08:29"},{"id":"22","auctionid":"5","steamid":"76561198173814231","created_at":"2015-07-04 05:08:27","updated_at":"2015-07-04 05:08:27"},{"id":"21","auctionid":"5","steamid":"76561198173814231","created_at":"2015-07-04 05:07:53","updated_at":"2015-07-04 05:07:53"},{"id":"20","auctionid":"1","steamid":"76561198173814231","created_at":"2015-07-04 05:05:45","updated_at":"2015-07-04 05:05:45"},{"id":"18","auctionid":"1","steamid":"76561198173814231","created_at":"2015-07-04 05:04:02","updated_at":"2015-07-04 05:04:02"}]

这是我的基本应用程序：

<html>
    <head>
        <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    </head>
<body>

<div data-ng-app="myApp" data-ng-controller="indexFeedController">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li data-ng-repeat="x in names">
      @{{ x[0].bids }}
    </li>
  </ul>
</div>
<script>
    var app = angular.module('myApp', []);

    app.controller('indexFeedController', function($scope, $http) {

    $http.get("http://45.55.242.33/api/indexfeed")
        .success(function(response) {
            $scope.names = response.records;
            console.log(response);
        });
    });
</script>
</body>

我对Angular很陌生，并且很难看到如何将JSON输出到我的HTML上。

任何帮助都将不胜感激。

谢谢！

编辑：

Changinn到{{ x.bids }}似乎没有用。

这是console.log的{{1}}输出 output

Answer 1

好吧，你将response.records存储到范围内。但响应是JSON数组。 JSON数组没有任何records字段。

代码应该看起来像

$http.get("http://45.55.242.33/api/indexfeed")
    .success(function(response) {
        $scope.names = response;
    });
});

并且HTML应该看起来像

<li data-ng-repeat="x in names">
    {{ x.bids }}
</li>

将不同类型的对象存储到同一个数组中非常奇怪：只有数组的第一个元素才有出价。这样就会创建许多空列表项。

Answer 2

更改此行：

<li data-ng-repeat="x in names">
    {{ x.bids }}
</li>

从API获取JSON然后输出

2 个答案: