как отобразить элемент массива внутри цикла

#javascript #html #typescript #ionic-framework #ionic3

#javascript #HTML #typescript #ionic-framework #ionic3

Вопрос:

Я пытаюсь отобразить элемент массива внутри цикла.

 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 мне нужно показать изображение.

Комментарии:

1. Что это за ужас JSON.parse(JSON.stringify()) ? Пожалуйста, опубликуйте result без предварительной строки. Если вы получите данные как есть, исправьте серверную часть.

Ответ №1:

Вам нужно попробовать использовать приведенный ниже объект result json напрямую

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

Ответ №2:

вам нужно указать свой базовый URL перед путем к изображению следующим образом.

ts-файл объявляет базовый URL

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

  }
  

затем просто добавьте этот базовый URL перед своим path

 <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();
    }
}
  

Я думаю, что таким образом это должно сработать.

Не забудьте в следующих вопросах подробно описать ошибку, которую вы получаете.