ng-repeat through an Array of Objects

Question

I'm creating a little shoutbox with angular JS and StamPlay. Therefore I've created some 'Test Shouts' than can be accesed via an URL

In my Angular app I've created a Service to fetch the data:

app.factory('shouts', ['$http', function ($http) {

    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts').success(function (data) {
        return data.data;
    });

}]);

Inside my MainController I attach the data to the $scope.

app.controller('HomeController', [
    '$scope',
    'shouts',

    function ($scope, shouts) {
        $scope.shouts = shouts;
    }

]);

But when I'm tyring to ng-repeat through the data[], i can't access the objects inside. I don't understand whats the problem.

<div ng-repeat="shout in shouts">
  {{shout.title}}
</div>

Any error thrown in the console window? Also - you should be using track by - for performance e.g. ng-repeat="shout in shouts track by $index" — Katana24, Mar 18 '16 at 16:04
unfortunately there are no errors in console. You can view the app running here: https://shoutbox.stamplayapp.com/#/ — juleee, Mar 18 '16 at 16:07

George Chen · Accepted Answer · 2016-03-18T16:28:41.200

0

shouts is a $promise even you do "return data.data". So you need to assign $scope.shouts when the promise resolved.

app.factory('shouts', ['$http', function ($http) {

    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts');

}]);

app.controller('HomeController', [
    '$scope',
    'shouts',

    function ($scope, shouts) {
       shouts.then(function(data) { $scope.shouts = data.data});
    }

]);

Another options is to resolve shouts in you route config and inject it into the controller

$routeProvider
.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController",
    resolve: {
        shout_data: shouts
    }


app.controller('HomeController', [
    '$scope',
    'shout_data',

    function ($scope, shout_data) {
       $scope.shouts = shout_data;
    }

]);

edited Mar 18 '16 at 16:28

answered Mar 18 '16 at 16:14

George Chen

6,592
5
21
23

Shouldn't it be: shouts().then(function(data) { $scope.shouts = data.data}); – jbrown Mar 18 '16 at 16:28
{{shout.title}} That solved my problem! Seems like the way Stamplay is returning the Data is a bit awkward – juleee Mar 18 '16 at 16:47
Do i do the adding of a new shout:{} to my backend inside the service or inside the MainController? I mean the http post request. – juleee Mar 18 '16 at 17:05
For the sake of Single responsibility principle, do it in service. if your back-end is REST api, consider using $resource – George Chen Mar 18 '16 at 17:12
Using the $resource, I have again a problem with the format how stamplay api returns the data. $resource.query() seems to be expecting an Array of Objects but the API returns: { "data": [], "pagination": {} } And i need to geht the data[] with Objects inside – juleee Mar 18 '16 at 18:51
you still do something like $scope.shouts = queryResult.data in your query's callback – George Chen Mar 18 '16 at 18:57
Yes but I get an error from $resource: https://docs.angularjs.org/error/$resource/badcfg?p0=query&p1=array&p2=object&p3=GET&p4=https:%2F%2Fshoutbox.stamplayapp.com%2Fapi%2Fcobject%2Fv1%2Fshouts – juleee Mar 18 '16 at 19:12
instead of query, call $resouce.get – George Chen Mar 18 '16 at 19:15
Hi @juleee , Isaiah here with Stamplay. Can I ask how the data is being returned from Stamplay? Also feel free to use the intercom button inside the Stamplay editor on the bottom right corner for more direct support. Let me know, I'm happy to take a look at how Stamplay is responding to your query :) – Isaiah Grey Mar 18 '16 at 20:36

score -1 · Answer 2 · answered Mar 18 '16 at 16:09

-1

Did you forget to attach your controller to the HTML?

<div ng-controller="HomeController">
    <div ng-repeat="shout in shouts">
      {{shout.title}}
    </div>
</div>

More information about ngController: https://docs.angularjs.org/api/ng/directive/ngController

answered Mar 18 '16 at 16:09

Jasper Seinhorst

1,056
6
19

No, i attached the Controller to my View via the $routeProvider – juleee Mar 18 '16 at 16:14

ng-repeat through an Array of Objects

2 Answers2