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' : ''}"
  }
}

我有一些类似JSON的JSON数据，我试图在与angujarjs的循环中显示此结果，但我不知道如何读取'src'的值，但一直得到未定义的
我的模板看起来像这样

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

控制器看起来像这样

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

服务看起来像

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

}]）;

Answer 1

您将获得undefined，因为field_mobile_image的值实际上是一个JSON字符串，因此它没有属性src。除了需要采取任何步骤来访问整个JSON结构之外，您还需要修复整个对象并对该属性运行JSON.parse()。如果您不确定如何编写函数来显示整个新闻数组，则将很有帮助。

编辑：另外，您还需要按照评论者的建议使用ng-src。

摩尔编辑：要弄清楚这一点，请考虑所讨论的属性实际上是用双引号引起来的，因此它不是对象，而是字符串。查看（任意）字符串上的属性和方法的列表，您将找不到src。这是一些reading。

要使此字符串成为对象，解析函数实际上将遍历字符串的字符，并确定对象的外观并将其返回给您。这是一个如何处理单个项目的示例：

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

Answer 2

JSON数据

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

HTML模板

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

AngularJS读取模板中对象的值

2 个答案: