title: Dynamic routing with Angular - how to work with this JSON?
body: <p>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 <strong>/#/work/1</strong> and <strong>/#/work/2</strong>, 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.</p>
  
  <p>My JSON looks exactly like this:</p>
  
  <pre><code>[
   {
    "id": 1,
    "title": "New post",
    "body": "oh yeah"
   },
   {
    "id": 2,
    "title": "another one",
    "body": "test test test",
   }
  ]
  </code></pre>
  
  <p>and I'm trying to route dynamically to each ID, set up in my config app like so:</p>
  
  <pre><code>myApp.config(function($routeProvider){
    $routeProvider.
    when('/',{
      templateUrl: 'partials/home',
      controller: 'mainController'
    }).
    when('/work/:id', {
      templateUrl: 'partials/project',
      controller: 'postController'
    })
  });
  </code></pre>
  
  <p>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</p>
  
  <pre><code>&lt;div class = "images" ng-repeat = 'data in projects"&gt;
     &lt;a href = "#/work/{{ data.id }}"&gt;
       &lt;p&gt; {{ data.title }} &lt;/p&gt;
     &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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;
    });
  }]);
  </code></pre>
  
  <p>so my factory is set up like so:</p>
  
  <pre><code>var workServices = angular.module('workServices', ['ngResource']);
  
  projectServices.factory('workPost', function($http) {
    return {
      getData: function() {
        return $http({
        url: 'somelink/todata.json',
        method: 'GET'
        })
      }
    }
  });
  </code></pre>
  
  <p>and finally I'm trying to access the data associated with the ID in my view like so:</p>
  
  <pre><code>&lt;p&gt; {{ data.body }} &lt;/p&gt;
  </code></pre>
  
  <p>This does not work, however repeating it or specifying which item in the array I want (like data[1].title) does</p>
  
  <p>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? </p>
  
  <p>Thanks for looking.</p>