Получение неопределенного значения от json в консоли angular 5 - PullRequest
Новая
       23

Получение неопределенного значения от json в консоли angular 5

0 голосов
/ 13 октября 2018

У меня ниже ответ от API 

 [
  {
    "Cinema_strName": "Cll, Kollam",
    "Cinema_strID": "CEWB",
    "Cinema_strBannerImg": "",
    "cinema_addr": "5th  Kollam",
    "cinema_loc": "<iframe src=\"https://www9550314\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
    "cinema_mob": 0
  },
  {
    "Cinema_strName": "Cs, Kollam",
    "Cinema_strID": "KEWB",
    "Cinema_strBannerImg": "",
    "cinema_addr": "Carlangara, Kollam, Kerala - 691581",
    "cinema_loc": "<iframe src=\"hsen!2sin49\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
    "cinema_mob": 0
  }
]

Я хочу получить cinema_loc от API для этого я делаю ниже код 

this.common.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
     this.cinema = result;
     this.loc = this.cinema.cinema_loc;      

     console.log(this.loc);


  }else{
      alert('Cinema not found');
  }

})

Но это дает мне неопределенное значение.Если я напишу this.cinema[0].cinema_loc.Я получу только первый ответ iframe.Пожалуйста, помогите.

Для @ nikhil 

<div class="col-md-9">
    <div class="map" *ngFor="let map of html">
    <div [innerHTML]="map"></div>
   </div>
</div>

Ответы [ 3 ]

0 голосов
/ 13 октября 2018

Поскольку this.cinema может быть массивом или объектом, вам нужно будет выполнить итерацию по нему, если это массив.Когда вы пытаетесь добавить HTML, вы можете использовать Array.reduce , чтобы создать строку HTML, а затем добавить ее в соответствии с требованием.Попробуйте следующее 

let html = this.cinema.cinema_loc;
if(Array.isArray(this.cinema)) {
    html = this.cinema.reduce((a, {cinema_loc}) => a + cinema_loc, "");
}
0 голосов
/ 13 октября 2018

В вашем коде есть пара проблем -

  1. Неправильный способ итерации массива кинотеатров.
  2. Дезинфицирующее средство - angular будет сообщать о небезопасном html, так что лучше его санировать перед вамииспользуйте его.

Создайте метод для очистки 

  safeHTML(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }

В html 

<div class="map" *ngFor="let map of cinema">
  <div [innerHTML]="safeHTML(map.cinema_loc)"></div>
</div>

Демо

Демо здесь https://stackblitz.com/edit/angular-iframe-sanitizer

0 голосов
/ 13 октября 2018

this.cinema - это array, а не объект, если вы хотите получить доступ ко всем элементам, которые вам нужны для их перебора.

дляДля отображения в шаблоне используйте ngFor следующим образом: 

<ul>
    <li *ngFor="let cineObj of cinema">
      {{ cineObj.cinema_loc }}
    </li>
</ul>

, если вам нужен только cinema_loc из всех элементов, вы можете попробовать 

let result = this.cinema.map(a => a.cinema_loc);

, если вы хотите сгенерировать HTML из него, используйте

let resultHtml = this.cinema.map(function(cineObj) {
return cineObj.cinema_loc;
}).join(', ');
...