CODEWITHSUNDEEP
javascriptruby-on-railsangularjsjsonhttp
biscuit_
biscuit_

Reputation: 187

Dynamic routing with Angular - how to work with this JSON?

I'm currently trying to pull in some JSON from an API with Angular's http method. I can retrieve the data fine, however I can't target specific ID's - to be clear what I'd like to do is have say /#/work/1 and /#/work/2, and be able to use the data relevant to that ID. I have looked into using $routeParams to do this but I have only gotten so far.

My JSON looks exactly like this:

[
 {
  "id": 1,
  "title": "New post",
  "body": "oh yeah"
 },
 {
  "id": 2,
  "title": "another one",
  "body": "test test test",
 }
]

and I'm trying to route dynamically to each ID, set up in my config app like so:

myApp.config(function($routeProvider){
  $routeProvider.
  when('/',{
    templateUrl: 'partials/home',
    controller: 'mainController'
  }).
  when('/work/:id', {
    templateUrl: 'partials/project',
    controller: 'postController'
  })
});

This is linked in my view like this, as I'm using ng-repeat all of the data for this view is succesfully being printed - it runs through my JSON fine

<div class = "images" ng-repeat = 'data in projects">
   <a href = "#/work/{{ data.id }}">
     <p> {{ data.title }} </p>
   </a>
</div>

and my controller is set up like this, as you can see I'm calling a function defined in my factory to make the http request here:

var postController = angular.module('postControllers', []);

postControllers.controller('projectController', ['$scope', '$routeParams', 'workPost',
  function($scope, $routeParams, workPost) {
   $scope.projectID = $routeParams.id;
   workPost.getData().success(function(data){
   $scope.data = data;
  });
}]);

so my factory is set up like so:

var workServices = angular.module('workServices', ['ngResource']);

projectServices.factory('workPost', function($http) {
  return {
    getData: function() {
      return $http({
      url: 'somelink/todata.json',
      method: 'GET'
      })
    }
  }
});

and finally I'm trying to access the data associated with the ID in my view like so:

<p> {{ data.body }} </p>

This does not work, however repeating it or specifying which item in the array I want (like data[1].title) does

Clicking the href routes me correctly to #/work/id, so my config is fine. I'm just not sure how to get the relevant data (i.e. title, body) associated with only that ID? I was thinking it may be the way my JSON is structured, perhaps I need to nest the parameters under an object for each?

Thanks for looking.

Upvotes: 0

Views: 931

Answers (2)

Prashant
Prashant

Reputation: 8040

When you do $scope.data = data;, you are setting the entire array of objects into the scope's data variable.

What you want to do is find the object with id matching the route param's id from the array and set that object as scope's data. You can use Array.prototype.find() to do just that.

workPost.getData().success(function(data){
    $scope.data = data.find(function (element) {
        return element.id === $scope.projectID;
    });
});

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

Your issue is that you are working with only one endpoint which is a static resource file that has all data in it.

You need to loop over that data and filter out the one you need by matching properties in the array of objects with the $routeParams value.

When you find the match assign it to the scope

Upvotes: 1

Related Questions