CODEWITHSUNDEEP
javascriptangularjs
user1108509
user1108509

Reputation: 99

Angularjs read value of object in template

"node" : {
    "title": "Event hold tomorow",
    "field_mobile_image" : " {'src' : 'http://www.example.com/sites/default/files/image_default_banner.jpg','alt' : ''}"
  }
}, "node" : {
    "title": "Event hold tomorow",
    "field_mobile_image" : " {'src' : 'http://www.example.com/sites/default/files/image_default_banner.jpg','alt' : ''}"
  }
}

I have some JSON data that looks like the above from an API I am trying to display this result in a loop with angujarjs i can't figure out how to read the value of 'src' i keep getting an undefined
my template looks like this

<a class="list card" ng-repeat="newsitem in news" style="display:block;text-decoration:none;" ui-sref="menu.newsDetail()" id="news-card22">
<img ng-src="{{newsitem.node.field_mobile_image.src}}">
  <i class="icon ion-android-calendar"></i>{{newsitem.node.title}}</ion-item>

the controller looks like this

 function($scope, $stateParams, getPageInfo) {
    getPageInfo.news().then(function(res) {
        $scope.news = res;
    });

The service looks like 

.service('getPageInfo', ['$http', function($http) {
    news: function() {
      let api_url = "http://example.com/";
        endpoint = "api/news";
        return $http.get(api_url + endpoint).then(function(resp) {
            console.log(resp.data.data[0].node.field_mobile_image.src); //undefined 
            return resp.data.data
        });
    }
return ret;

}]);

Upvotes: 0

Views: 1132

Answers (2)

Shubham Jain
Shubham Jain

Reputation: 307

JSON DATA 

$scope.news = {
node : {
  title : "Event hold tomorow",
  field_mobile_image : {
      src : "http://www.example.com/sites/default/files/image_default_banner.jpg",
      alt : ''
  }
}}

Html template 

<a class="list card" ng-repeat="newsitem in news" style="display:block;text- 
 decoration:none;" ui-sref="menu.newsDetail()" id="news-card22">
  <img ng-src="{{newsitem.field_mobile_image.src}}">
   <i class="icon ion-android-calendar"></i>{{newsitem.title}}</ion-item>

Upvotes: 0

Ben Steward
Ben Steward

Reputation: 2408

You are getting undefined because the value of the field_mobile_image is actually a JSON string, so it does not have a property of src. You’ll need to fix up your whole object and run JSON.parse() on that property in addition to whatever steps you took to get access to the entire JSON structure. Showing the entire news array would be helpful, if you’re not sure how to write a function to do that.

Edit: Also, you will need to use ng-src, as the commenters recommended.

Moar edit: To tease this out, consider that the property in question is actually wrapped in double quotes, so it is not an object, it is a string. Looking at the list of properties and methods on (any) string, you will not find src. Here’s some reading for that.

To make this string an object, the parse function will actually iterate through the characters of the string and identify what the object should look like and return that to you. Here’s an example of how you might handle that for a single item:

function fixData (data) {
  data.field_mobile_image = JSON.parse(data.field_mobile_image)
  return data
}

Upvotes: 1

Related Questions