Question

我正在尝试显示来自我的JSON对象的数据，我的对象在2个图像中如下

在数据中，我有c_name，max_slots和数组slots，我有base_image

我无法让基本图像数组显示在我的HTML中。

这是我目前的HTML打印输出

这是我的JavaScript

      $scope.GetData = function () {
        $http({
            url: "http://www.ccuktech.co.uk/ccuploader/campaigns/getCampaign",
            method: "POST",
            date: {},
            headers: {'Content-Type': 'application/json'}
        }).then(function (data) {
            // success
            console.log('you have received the data ');
            console.log(data);
            $scope.responseData = data.data;
        }, function (response) {
            // failed
            console.log('failed getting campaigns goo back to log in page.');
            console.log(response);
        });
     };

     $scope.GetData();

和HTML

<div ng-repeat="data in responseData">
  <h2>name</h2>:
  {{data.c_name}}

  <h2>max slots</h2>:
  {{data.max_slots}}

  <h2>image</h2>:
  {{data.base_image}}
</div>

Answer 1

您无法在div标签中显示图片，请使用 <img> 代替

<div ng-repeat="data in responseData">
    <h2>name</h2>:
    {{data.c_name}}
    <h2>max slots</h2>:
    {{data.max_slots}}
    <h2>image</h2>:
     <img ng-src="{{data.base_image}}"></img>
 </div>

Answer 2

由于base_image位于内部数组中，您必须在ng-repeat responseData

内循环该数组

<div ng-repeat="data in responseData">
  <h2>name</h2>:
  {{data.c_name}}

  <h2>max slots</h2>:
  {{data.max_slots}}

  <h2>image</h2>:
  <div ng-repeat="slot in slots">
    <img src={slot.base_image} />
  </div>
</div>

Answer 3

{{data.base_image}}

无法访问，因为它位于嵌套的slots数组中，因此为了引用base_image，您还必须遍历插槽。试试这里给出的东西：

ng repeat nested array

无法显示来自json对象的图像

3 个答案: