Getting JSON from API then outputting

Question

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

why are you using x[0] in html template x is already single item if your name array contains bids you can directly write 'x.bids' — Aks
– Aks, Commented Jul 7, 2015 at 6:12

JB Nizet · Accepted Answer · 2015-07-07 06:13:51Z

1

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.

answered Jul 7, 2015 at 6:13

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

5 Comments

KriiV Over a year ago

Edited OP. Take a look :)

JB Nizet Over a year ago

That doesn't change anything to my answer. Have you at least read it and tried it?

JB Nizet Over a year ago

You have changed $scope.names = response.records; to $scope.names = response;? And you don't have any error in the console?

KriiV Over a year ago

Thanks! That's what did it. Needed to be $scope.names = response;

KriiV Over a year ago

I did, but I'm sure you agree it's easy to miss. Especially when not looking out for things like that. I assure you I read, I just missed that

Hardy · Accepted Answer · 2015-07-07 06:16:45Z

0

Change this line:

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

answered Jul 7, 2015 at 6:16

Hardy

5424 silver badges10 bronze badges

1 Comment

KriiV Over a year ago

Edited OP. Take a look :)

Collectives™ on Stack Overflow

Getting JSON from API then outputting

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related