Accessing specific json data in AngularJS

Question

I have a json file that includes article information where each article has an id. This is how it is formatted:

[{"title":"ISIS No. 2 killed in US special ops raid",
  "id":"14589192090024090",
  "agency":"foxnews",
  "text":"Article text goes here.",
  "topic":"Politics",
  "imagePath":"resources\/images\/foxnews\/14589192090024090.img.jpg"},
 {"title":", etc etc }]

On my main page I have a list view that shows the title and author and when you click on the article I want it to display the text, topic, etc. My angularJS factory for requesting the json looks like this:

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

  trooNewsServices.factory('Articles', ['$resource',
  function($resource){
    return $resource('resources/articles.json');
  }]);

I access the full list of articles in my home page controller by using:

this.articles = Articles.query();

What I am struggling with is when I click on a specific article I want that next page to display that articles info. I am attempting to do this by getting the specific id using $routeParams.id and then looking for the id in the json. Here is the code in my selected article controller:

TrooNews.controller('ArticleController', ['$routeParams','Articles',
    function($routeParams, Articles) {

        //look through articles for specific article using routeparams
        Articles.query().$promise.then(function(articles) {

            for(i = 0; i < articles.length; i++){

                if(articles[i].id===$routeParams.id){
                    this.selectedArticle=articles[i];
                }

            }

        });

        console.log(selectedArticle);
}]);

I get an error 'Could not instantiate controller ArticleController'. How can I access my selectedArticle variable outside the promise function?

Your module name is **trooNewsServices**. Use **trooNewsServices.controller('ArticleController', ['$routeParams','Articles', '$scope', function($routeParams, Articles, $scope) {.....})** — Arun Shinde, Mar 31 '16 at 02:27
in the main TrooNews module in a separate file I include trooNewsServices as a dependency for the project so that shouldn't be the issue — Jess Anastasio, Mar 31 '16 at 02:57

Arun Shinde · Accepted Answer · 2016-03-31T04:49:11.570

1

TrooNews.controller('ArticleController', ['$routeParams','Articles',
    function($routeParams, Articles) {
       var parent = this;
       parent.selectedArticle = null;
       parent.setSelectedArticle = function(article){
          parent.selectedArticle = article;
       }
       //look through articles for specific article using routeparams
       Articles.query().$promise.then(function(articles) {
          for(i = 0; i < articles.length; i++){
            if(articles[i].id===$routeParams.id){
                parent.setSelectedArticle(articles[i])
                break;
            }
        }
    }); 
}]);

edited Mar 31 '16 at 04:49

answered Mar 30 '16 at 00:33

Arun Shinde

1,185
6
12

this option seems like a good solution but unfortunately since im using the new angular router in my project $scope doesn't work that's why I was using the .this keyword :( github.com/angular/router/issues/313 I wonder if there is a way to do this w.o scope – Jess Anastasio Mar 31 '16 at 04:44

score 0 · Answer 2 · answered Mar 30 '16 at 00:35

0

You're making an async call, so don't expect the results to be there right after you call it. Use the callback method:

Articles.query().then(function(articles){

    for(i = 0; i < articles.length; i++){
        if(article[i].id===id){
            selectedArticle=article;
        }
    }

    console.log(selectedArticle);
})

Or you can just force a scope digest inside the callback call.

answered Mar 30 '16 at 00:35

Shomz

37,421
4
57
85

I got this .then function to work but now my selectedArticle variable is not global and I can't access it anywhere but inside that .then function. I tried everything to make the variable global but think I'm missing something – Jess Anastasio Mar 30 '16 at 21:43
You can make it a scope variable, like `$scope.selectedArticle = article;` If you don't need that, just put `var selectedArticle;` above my snippet. – Shomz Mar 30 '16 at 21:44
tried both of those things and they didn't work which seems really weird. Instead of Articles.query().then I had to use Articles.query().$promise.then, I wonder if that would have something to do with it. outside of the function(articles) I cant access selectedArticle, so cant access it in my html – Jess Anastasio Mar 31 '16 at 02:07
Is the data correct when you log it? If so, force the scope digest cycle inside that callback like this: `$scope.$apply();` – Shomz Mar 31 '16 at 02:08
the data is correct when I log it inside the function, it gives me an object of type resource. for some reason scope isnt working for me. when I pass it in to my controller it throws an error (since im using the angular new router all I get is 'Could not instantiate controller ArticleController'. I'm going to edit the code above to show you what I have! – Jess Anastasio Mar 31 '16 at 02:18
I actually just found w more research that $scope apparently doesn't work with the new angular router.. https://github.com/angular/router/issues/313 so I need to somehow get that variable w/o using scope – Jess Anastasio Mar 31 '16 at 02:26
Hmmm, I suppose you can go with `this.selectedArticle` then. – Shomz Mar 31 '16 at 02:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107801/discussion-between-jess-anastasio-and-shomz). – Jess Anastasio Mar 31 '16 at 03:04

Accessing specific json data in AngularJS

2 Answers2