CODEWITHSUNDEEP
jsonangularjs
KriiV
KriiV

Reputation: 2020

Getting JSON from API then outputting

I am getting some json from an API I have made and it is working. Sample response is this:

[{"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"}]

Here is my basic app:

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

I'm quite new to Angular and struggling to see how I can output the JSON onto my HTML.

Any help would be appreciated.

Thanks!

EDIT:

Changinn to {{ x.bids }} doesn't seem to work.

This is my console.log output for response output

Upvotes: 1

Views: 43

Answers (2)

Hardy
Hardy

Reputation: 542

Change this line:

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

Upvotes: 0

JB Nizet
JB Nizet

Reputation: 692151

Well, you're storing response.recordsinto the scope. But the response is a JSON array. A JSON array doesn't have any records field.

The code should probably look like

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

and the HTML should look like

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

It's quite strange to store objects of different types into the same array though: only the first element of your array has a bids. So that will create many empty list items.

Upvotes: 1

Related Questions