如何在循环内显示数组元素答案

【问题标题】：how to display an element of array inside a loop如何在循环内显示数组元素
【发布时间】：2019-08-27 09:22:02
【问题描述】：

我正在尝试在循环中显示数组元素。

result: {
  "success": true,
  "message": "Categories Found",
  "code": 200,
  "data": {
    "total": 5,
    "per_page": 15,
    "current_page": 1,
    "last_page": 1,
    "next_page_url": null,
    "prev_page_url": null,
    "from": 1,
    "to": 5,
     "data": [
          {
            "id": 8,
            "asset_id": 76,
            "parent_id": 12,
            "lft": 12,
            "rgt": 13,
            "level": 2,
            "path": "clothes/women",
            "extension": "com_content",
            "title": "Women",
            "alias": "women",
            "note": "",
            "description": "",
            "published": 1,
            "checked_out": 496,
            "checked_out_time": "2019-04-05 11:25:34",
            "access": 1,
            "params": "{\"category_layout\":\"\",\"image\":\"images\\/themeparrot\\/banner-category\\/banner.png\",\"image_alt\":\"women\"}",
            "metadesc": "",
            "metakey": "",
            "metadata": "{\"author\":\"\",\"robots\":\"\"}",
            "created_user_id": 496,
            "created_time": "2017-10-06 07:34:39",
            "modified_user_id": 496,
            "modified_time": "2017-12-05 12:39:35",
            "hits": 0,
            "language": "*",
            "version": 1
          },
          {
            "id": 9,
            "asset_id": 78,
            "parent_id": 12,
            "lft": 14,
            "rgt": 15,
            "level": 2,
            "path": "clothes/men",
            "extension": "com_content",
            "title": "Men",
            "alias": "men",
            "note": "",
            "description": "",
            "published": 1,
            "checked_out": 0,
            "checked_out_time": "0000-00-00 00:00:00",
            "access": 1,
            "params": "{\"category_layout\":\"\",\"image\":\"images\\/themeparrot\\/banner-category\\/banner_02.png\",\"image_alt\":\"men\"}",
            "metadesc": "",
            "metakey": "",
            "metadata": "{\"author\":\"\",\"robots\":\"\"}",
            "created_user_id": 496,
            "created_time": "2017-10-06 07:42:58",
            "modified_user_id": 496,
            "modified_time": "2017-12-05 12:39:40",
            "hits": 0,
            "language": "*",
            "version": 1
          },

上面是一个 Api 的响应。这是循环功能，需要在参数下显示图像。

还有我的 ts：

displaycategory(){
    this.showLoader();
    this.categories.categorydisplay().then((result) => {
      console.log('result:'+JSON.stringify(result));
      this.loading.dismiss(); 
      this.data = JSON.parse(JSON.stringify(result));
      this.categorydata = JSON.parse(JSON.stringify(this.data.data.data));

    }), (err) => {
      console.log(err);
      this.loading.dismiss();
    }
}

和 HTML：

<ion-grid>
        <ion-row>
        <ion-col col-6  *ngFor="let tms of categorydata;" (click)="test($event, tms.id)" >

  <ion-card *ngIf="tms.parent_id == 12">
      <img src="{{tms.params.image}}">
      <div class="card-title">{{tms.title}} </div>
      <div class="card-subtitle"></div>
    </ion-card>

  </ion-col>
</ion-row>
  </ion-grid>

在这个 html 中我需要显示一个图像。

【问题讨论】：

有什么可怕的JSON.parse(JSON.stringify())？请张贴result 之前不要对其进行字符串化。如果您按原样收到数据，请修复后端。

标签： javascript html typescript ionic-framework ionic3

【解决方案1】：

您需要直接从结果 json 对象中尝试以下操作

 this.categorydata = this.result.data.data;

【讨论】：

【解决方案2】：

您需要像这样在图像路径之前提供您的基本网址。

ts 文件声明基地址

export class HomePage implements OnInit {
 public baseurl='http://baseurl.xyz/';
  constructor(
    public navCtrl: NavController
  ) {

  }

然后在你的路径之前添加这个基本 url

<ion-grid>
        <ion-row>
        <ion-col col-6  *ngFor="let tms of categorydata;" (click)="test($event, tms.id)" >

  <ion-card *ngIf="tms.parent_id == 12">
      <img src="{{baseurl+tms.params.image}}">
      <div class="card-title">{{tms.title}} </div>
      <div class="card-subtitle"></div>
    </ion-card>

  </ion-col>
</ion-row>
  </ion-grid>

它对我有用。

【讨论】：

【解决方案3】：

首先你应该改变你的 ts 来正确处理结果：

您使用的是this.data.data.data，它应该是this.data.data。
您应该只解析作为字符串的params 字段

displaycategory(){
    this.showLoader();
    this.categories.categorydisplay().then((result) => {
      console.log('result:'+JSON.stringify(result));
      this.loading.dismiss(); 
      this.data = JSON.parse(JSON.stringify(result));
      this.categorydata = this.data.data.map(({params, ...rest}) => ({...rest, params: JSON.parse(params)}));

    }), (err) => {
      console.log(err);
      this.loading.dismiss();
    }
}

我认为这样，它应该可以工作。

请记住在下一个问题中详细说明您收到的错误。

【讨论】：