Retrieve specific data within ng-repeat loop angularjs

Question

I'd like to retrieve specific data within a JSON file within an ng-repeat loop, My code is as follows thus far, and it works correctly bringing in the correct low resolution url of the image. I want to display the first comment corresponding to this image from a specific user below it in the <p> tag, ie I want the the first "text" value always from the username "tellasaur". Not sure how to bring that in, could I have some help? thanks!

NG-REPEAT LOOP

 <li ng-repeat="p in pics">
                        <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
 <p></p>
                    </li>

CONTROLLER

 app.controller('ShowImages', function($scope, InstagramAPI){
    $scope.layout = 'grid';
    $scope.data = {};
    $scope.pics = [];

    InstagramAPI.fetchPhotos(function(data){
      $scope.pics = data;
      console.log(data)
    });
  });

JSON

 "images":{
            "low_resolution":{
               "url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
               "width":320,
               "height":320
            },

         },
 "comments":{
            "count":38,
            "data":[
               {
                  "created_time":"1436314585",
                  "text":"Living on a lake @amarie4107",
                  "from":{
                     "username":"tellasaur",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
                     "id":"174270894",
                     "full_name":"kristella"
                  },
                  "id":"1024203434844916571"
               },
               {
                  "created_time":"1436317671",
                  "text":"Wow",
                  "from":{
                     "username":"sbcarol2002",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
                     "id":"1280059782",
                     "full_name":"Susan Long"
                  },
                  "id":"1024229322726738700"
               },
               {
                  "created_time":"1436320519",
                  "text":"\ud83d\udc93 dreamyy",
                  "from":{
                     "username":"veekster",
                     "profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
                     "id":"31179150",
                     "full_name":"Victoria Wright"
                  },
                  "id":"1024253210688915485"
               }

            ]
         }

do you need to show the comment users in <p> which is in comments in JSON, or ? specific user ? — Kalhan
– Kalhan, Commented Jul 9, 2015 at 7:29
I want to show the first comment of the user tellasaur in all cases. ie. the "text" value from the username "tellasaur". — user1937021
– user1937021, Commented Jul 9, 2015 at 7:31
Hey you want something like :- plnkr.co/edit/MBSHschvOwYHtp1EkFD9?p=preview — squiroid
– squiroid, Commented Jul 9, 2015 at 7:43
Hey @squiroid that looks good, but how can I get the comment from the username "tellasaur" always? — user1937021
– user1937021, Commented Jul 9, 2015 at 7:45

shaunhusain · Accepted Answer · 2015-07-09 07:43:15Z

Here's one way to do it using a filter.

angular.module('app',[])
.filter('getFirstCommentFrom',function(){
  return function(arr, user){
    for(var i=0;i<arr.length;i++)
    {
      if(arr[i].from.username==user)
        return arr[i].text;
    }
    return '';
  }
})
.controller('TestCtrl', function($scope){
  $scope.pics = [
    { "images":{
            "low_resolution":{
               "url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
               "width":320,
               "height":320
            },

         },
 "comments":{
            "count":38,
            "data":[
               {
                  "created_time":"1436314585",
                  "text":"Living on a lake @amarie4107",
                  "from":{
                     "username":"tellasaur",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
                     "id":"174270894",
                     "full_name":"kristella"
                  },
                  "id":"1024203434844916571"
               },
               {
                  "created_time":"1436317671",
                  "text":"Wow",
                  "from":{
                     "username":"sbcarol2002",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
                     "id":"1280059782",
                     "full_name":"Susan Long"
                  },
                  "id":"1024229322726738700"
               },
               {
                  "created_time":"1436320519",
                  "text":"\ud83d\udc93 dreamyy",
                  "from":{
                     "username":"veekster",
                     "profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
                     "id":"31179150",
                     "full_name":"Victoria Wright"
                  },
                  "id":"1024253210688915485"
               }

            ]
         }
     }
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
  <li ng-repeat="p in pics">
    <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
    {{p.comments.data|getFirstCommentFrom:'tellasaur'}}
  <p></p>
  </li>
</div>

Collectives™ on Stack Overflow

Retrieve specific data within ng-repeat loop angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related