CODEWITHSUNDEEP
angularjs
Peter Boomsma
Peter Boomsma

Reputation: 9844

How to select value inside an object

I'm trying to store 1 or more values that are inside an array into a scope. This is the result of my JSONP service,

angular.callbacks._7({
  "id":157336,"results":[
    {"id":"53db3c790e0a26189a000d09","iso_639_1":"en","key":"ePbKGoIGAXY","name":"Trailer 3","site":"YouTube","size":1080,"type":"Trailer"},
    {"id":"550df44b9251413554004d43","iso_639_1":"en","key":"KlyknsTJk0w","name":"Own it today","site":"YouTube","size":720,"type":"Trailer"},
    {"id":"533ec6fcc3a3685448009ccc","iso_639_1":"en","key":"nyc6RJEEe0U","name":"Teaser","site":"YouTube","size":720,"type":"Trailer"},
    {"id":"5376ab510e0a26141c0005a8","iso_639_1":"en","key":"zSWdZVtXT7E","name":"Trailer","site":"YouTube","size":720,"type":"Trailer"},
    {"id":"545da247c3a3685362005187","iso_639_1":"en","key":"Lm8p5rlrSkY","name":"Trailer 2","site":"YouTube","size":1080,"type":"Trailer"}
  ]
})

And I'm trying to store all the key values inside a scope called $scope.youtubeTrailer

But if I do it like this,

$scope.youtubeTrailer = response; 
console.log ($scope.youtubeTrailer)

The scope consists of an object (the movie) and inside that object is an array with the 5 id's. So what would be the correct selector for something like this?

If I search like this,

 console.log ($scope.youtubeTrailer.key)

I get an 'undefined´

* EDIT *

I've tried to solution below,

movieAdd.trailer(movie.id)
  .then(function(response){
    $scope.youtubeTrailer =[];
    console.log ($scope.youtubeTrailer)

    angular.forEach(response.results, function(item){
      console.log ('Hello world')
      if (item.hasOwnProperty('key')) {
        $scope.youtubeTrailer.push(item.key);
      }
    });

The console.log ($scope.youtubeTrailer) shows that the scope is empty. And the forEach function doesnt fire because the Hello log doesn't get shown in the console. If I change $scope.youtubeTrailer =[]; into $scope.youtubeTrailer = response; I do have the object in the scope but still the forEach doesn't fire.

* EDIT 2 *

By changinge response.results into response the forEach does fire.

* EDIT 3 *

I've got it somewhat working. I was getting the array in the scope, but when I saved the scope value in the create function it showed as null in the database. That's because I was trying to save an array. Using javascripts join I converted the array to a string which can be saved.

movieAdd.trailer(movie.id)
  .then(function(response){
    $scope.youtubeTrailer = [];
    angular.forEach(response, function(item){
      if (item.hasOwnProperty('key')) {
        $scope.youtubeTrailer.push(item.key);
        var youtubeArray = $scope.youtubeTrailer
        var youtubeString = youtubeArray.join();

Upvotes: 0

Views: 71

Answers (2)

Shaohao
Shaohao

Reputation: 3531

The code below basically is looping through the response.results array, which contains 5 objects. Each oject is assigned to the variable item. Check item has property of key, if true, add the value of item.key to $scope.youtubeTrailer.

$scope.youtubeTrailer =[];
angular.forEach(response.results, function(item) {
  if (item.hasOwnProperty('key')) {
    $scope.youtubeTrailer.push(item.key);
  }
});

Here is the link for Angular ForEach.

Upvotes: 3

Draco18s no longer trusts SE
Draco18s no longer trusts SE

Reputation: 15951

$scope.youtubeTrailer isn't just an object, it contains an array and its inside that array that the key field is. So, you're going to need to access the five interior items with an array access. e.g. $scope.youtubeTrailer.results[0].key

Upvotes: 1

Related Questions