Angularjs read value of object in template

Question

"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;

}]);

use ng-src instead of src more details is here w3schools.com/angular/ng_ng-src.asp — nerding_it
– nerding_it, Commented Aug 7, 2018 at 5:17
@SachilaRanawaka the news array is the JSON object it the first code I posted ng-src is no the issue when i console.log i get an emtpy value for image — user1108509
– user1108509, Commented Aug 7, 2018 at 5:21
I think the JSON format you are getting might wrong. it shoud be like this {"src" : "example.com/sites/default/files/…" : ''} — ArunKumar M N
– ArunKumar M N, Commented Aug 7, 2018 at 5:37

Ben Steward · Accepted Answer · 2018-08-07 05:34:18Z

1

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
}

edited Aug 7, 2018 at 5:34

answered Aug 7, 2018 at 5:23

Ben Steward

2,4171 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1108509 Over a year ago

thanks for you response i tried this and it throws a SyntaxError: Unexpected token ' in JSON at position 2 at JSON.parse (<anonymous>)

Ben Steward Over a year ago

There must be a rogue single quote character in your data. Where are you getting your data from? Make sure you’re not trying to run JSON.parse() on something that is not JSON.

Shubham Jain · Accepted Answer · 2018-08-07 05:53:42Z

0

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>

answered Aug 7, 2018 at 5:53

Shubham Jain

3071 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angularjs read value of object in template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related