JSON & databinding on detail view


#1

I’ve created some test JSON data with various options that I’d like to display (this will later come from an api):

var things =[
{"ID":775,"post_author":"some guy","post_content":"this is my content","post_date_gmt":"2012-02-01 14:00:00"},
{"ID":881,"post_author":"some other guy","post_content":"this is my other content","post_date_gmt":"2012-02-01 14:00:00"}
];

Pretty simple data set; works fine when i’m doing a list ALL

return {
    all: function() {
      return things;
    },
    get: function(thingId) {
      return things[thingId];
    }
  }

But when I try using GET to return the individual result set, it doesn’t do anything. (no errors, no data displayed)

    .state('things-index', {
      url: '/things',
          templateUrl: 'templates/things.html',
          controller: 'ThingsIndex'
    })

    .state('things-detail', {
      url: '/things/:thingId',
          templateUrl: 'templates/things-detail.html',
          controller: 'ThingsDetail'
    })

.

   .controller('ThingsIndex', function($scope, ThingsService) {
        $scope.things = ThingsService.all();
    })
    .controller('ThingsDetail', function($scope, $stateParams, ThingsService) {
        $scope.thing = ThingsService.get($stateParams.thingId);
    })

And this pretty much matches the PETS example databinding except for the encapsulation of quotes around each key, so "ID":1 instead of id:1

Any idea why the lookup isn’t happening? And/or how to fix?


#2

You’re confusing the pets example where pets[1] is really just get the array item # 1. It is NOT searching the objects inside the array for an item with an id of 1.

If you change the pets example to :

  var pets = [
    { "ID": 775, "title": 'Cats', description: 'Furry little creatures. Obsessed with plotting assassination, but never following through on it.' },
    { "ID": 776, "title": 'Dogs', description: 'Lovable. Loyal almost to a fault. Smarter than they let on.' },
    { "ID": 778, "title": 'Turtles', description: 'Everyone likes turtles.' },
    { "ID": 779, "title": 'Sharks', description: 'An advanced pet. Needs millions of gallons of salt water. Will happily eat you.' }
  ];

Then do pets[775] you will get nothing. This is because there is no 775th member in the array.

If you do pets[1], you will still get :Object {ID: 776, title: “Dogs”, description: “Lovable. Loyal almost to a fault. Smarter than they let on.”}` because that member is still in position 1 of the array.

If you want to search on data inside objects inside arrays, you have to iterate them or use lodash or underscore.

Lodash example :

var things =[
{"ID":775,"post_author":"some guy","post_content":"this is my content","post_date_gmt":"2012-02-01 14:00:00"},
{"ID":881,"post_author":"some other guy","post_content":"this is my other content","post_date_gmt":"2012-02-01 14:00:00"}
];

var myItem = _.find(things, { 'ID' : 775});
console.log(myItem)
Object {ID: 775, post_author: "some guy", post_content: "this is my content", post_date_gmt: "2012-02-01 14:00:00"}

#3

Ahh perfect thanks :slight_smile:

However after installing lodash and making a few tweeks:

var myItem = _.find(things, { 'ID' : parseInt(thingId)});
myItem = JSON.stringify(myItem);
return things[myItem];

It’s not yet working with my existing view bindings. The original code had spit back an object array rather than the json data format. But neither work; so i’m missing or not understanding the return properly.


#4

Not sure why you are using JSON.stringify. The myItem should bind just fine. It is an object already.


#5

the object didn’t work so i was attempting to get in a format that matches what was returned originally.