CODEWITHSUNDEEP
javascriptjsonangularjs
flvll
flvll

Reputation: 53

Angular JS TypeError: Cannot read property 'id' of undefined on Route

I'm in the process of learning a bit of AngularJS and I've hit a stumbling block. I can retrieve my jSON and feed it into the frontend, but my problem is coming when I'm going to a new view. My ID is not coming in correctly. Basically if click on my item that has a id 1 its displaying id 14. Or I get TypeError: Cannot read property '14' of undefined

Any ideas would be really helpful.

jSON

[
    {
        "id": 14,
        "title": "new post",
        "excerpt": "EXCERPT",
        "content": "ushajsd"
    },
    {
        "id": 10,
        "title": "last post",
        "excerpt": "test",
        "content": "test"
    },
    {
        "id": 4,
        "title": "middle post",
        "excerpt": "contents to post",
        "content": "contents to post"
    },
    {
        "id": 1,
        "title": "Hello world!",
        "excerpt": "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!",
        "content": "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!"
    }
]

AngularJS

//Create main module
var module = angular.module('module', [''])

//Services

module.factory('posts', function($http) {
  return {
      getAsync: function(callback) {
          $http.get('/wp-content/themes/ajax/ajax.php').success(callback);
      }
  };
});

// Set up our mappings between URLs, templates, and controllers
function caseStudyConfig($routeProvider) {
  $routeProvider.
    when('/casestudy/:id', {
      controller: caseCtrl,
      templateUrl: '/wp-content/themes/templates/casestudy.php'
    }).
    otherwise({
      redirectTo: '/'
    });
}

// Set up our route so the service can find it
module.config(caseStudyConfig);

//Controllers
function homeCtrl (posts, $scope) {
  posts.getAsync(function(data) {
       $scope.content = data;
  });
}

function caseCtrl (posts, $scope, $routeParams) {
  posts.getAsync(function(data) {
       $scope.content = data[$routeParams.id];
  });
}

Upvotes: 3

Views: 9571

Answers (1)

net.uk.sweet
net.uk.sweet

Reputation: 12431

Assuming the data property in your getAsync callback is a representation of the JSON you've posted, I think it's because you're attempting to access the object by it's position in the array and not by its id property. If you're using underscore / lodash, you could fix this easily like so: 

function caseCtrl (posts, $scope, $routeParams) {
  posts.getAsync(function(data) {
       // Find the object with id which matches id in route params
       $scope.content = _.findWhere(data, { id: $routeParams.id });
  });
}

Or you could write your own loop to retrieve the correct object from the collection: 

function caseCtrl (posts, $scope, $routeParams) {
  posts.getAsync(function(data) {
       $scope.content = getObjectById(data, $routeParams.id);
  });

  function getObjectById(collection, id) {
    for (var i = 0, obj; i < collection.length; i ++) {
        obj = collection[i];
        if (obj.id === id) {
            return obj;
        }
    }
    return null;
  }
}

Upvotes: 1

Related Questions