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

Posted 2023-03-13

【中文标题】如何在循环内显示数组元素

【英文标题】：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 之前不要对其进行字符串化。如果您按原样收到数据，请修复后端。

【参考方案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();
    

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

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