Angularjs displaying json in Rails

Question

I am trying to display a list of my donors - the html is:

<div class="panel">
<header>
 <h1> Donor Information </h1>
</header>

<div class="content">
 <div ng-app="Donor">
  <div ng-controller="DonorCtrl">

  <ul>
   <li ng-repeat="donor in donors">{{donors.name_last | json}}</li>
  </ul>

   </div>
  </div>
 </div>
</div>

My Donor_controller.js is this:

var app;
app = angular.module("Donor", ["ngResource"]);

app.factory("Donors", [
   "$resource", function($resource) {
    return $resource("/donors", {}, {
        update: {
            method: "PUT"
        }
    });
  }
]);

app.factory("Donor", [
"$resource", function($resource) {
    return $resource("/donors/:id", {
        id: "@id"
    }, {
        update: {
            method: "GET"
        }
    });
  }
]);

this.DonorCtrl = [
 "$scope", "Donor", "Donors", function($scope, Donor, Donors) {
    var donor;
    $scope.donor = Donor.query();
    $scope.donors = Donors;
    $scope.addDonor = function() {};
    donor = Donor.save($scope.newDonor)(function() {
        return $scope.donors.push(donor);
    });
    return $scope.newDonor = {};
  }
];

I am returning from my rails app via donors/1.json this:

{
  "donor": {
  "id": 1,
  "tools_id": null,
  "first_name": "Billy",
  "last_name": "Bullard"
  }
}

I get a list of dots when I view and it shows this on inspection (repeated):

<li ng-repeat="donor in donors" class="ng-scope ng-binding"></li>

How do I go from the json coming from Rails to the list of names in Angularjs?

Caio Cunha · Accepted Answer · 2013-03-30 19:31:11Z

2

You should remove | json from your bind and you want the donor's lastname, not the donors':

<li ng-repeat="donor in donors">{{donor.name_last}}</li>

Update 1

Also, you should have $scope.donors = Donors.query(); in your controller, not $scope.donor = ....

edited Mar 30, 2013 at 19:31

answered Mar 30, 2013 at 13:37

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

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

7 Comments

charlietfl Over a year ago

additional note...json filter is for pretty print of object or array, typically only used for development debugging

tbrooke Over a year ago

Removed json {{donor.last_name}} get: TypeError: Cannot read property '$id' of undefined donor the model for the repeat shows: [ undefined, { 0: d } , { 0: i } , { 0: v } , { 0: } ,

Caio Cunha Over a year ago

What are you returning for /donors/? Also, I just noticed that your array of donors is being saved saved to $scope.donor, not donors. And why are you setting $scope.donors = Donors? Shouldn't it be $scope.donors = Donor.query(); only?

tbrooke Over a year ago

now have '$scope.donors = Donors.query();' same thing it returns basically an empty list - Actually in looking at the returned list in batarang the list is the html in my form { donor: { 0: d $$hashKey: 006 } } this d is the start of div - weird

Caio Cunha Over a year ago

Pretty weird, but what you see in Network response? Are you gettin an array of donors? Is you server returning an application/json?

|

Collectives™ on Stack Overflow

Angularjs displaying json in Rails

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related