Получение undefined внутреннего массива ответа JSON в angular

У меня ниже JSON из api

 [
  {
    "CinemaId": "Hfsdfsdfs",
    "FilmCode": "HIWdfsdfsfsf47",
    "FilmTitle": "BAfsdfAAR",
    "CinemaName": "CsfsnfsfsAhmedabad",
    "CinemaCity": "Ahmedabad",
    "CinemaLicenseName": "BIGdfsfsAhmedabad",
    "CinemaEmailId": "himfsfsfilms.com",
    "CinemaBannerImg": "F&BCombo.jpg",
    "CinemaAddress": "5fsfdsfsdin Road, 380052, ",
    "CinemaMobile": "93dfsdf17441",
    "CinemaTel": "0",
    "CinemaLocation": "<iframe src=\"fsdfdsdfdsf\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
    "Shows": [
      {
        "MovieId": "fsfsfs",
        "CinemaId": "HIWB",
        "FilmCode": "HIdfsfs09847",
        "MovieName": "BAdsfsdfAAR",
        "ScreenName": "SCREEN 4",
        "AvailableSeats": "253",
        "SessionId": "115583",
        "ShowTime": "2018-10-26T14:00:00",
        "Cast": null,
        "Status": "available"
      },
      {
        "MovieId": "HO000fsdfsd7",
        "CinemaId": "HIWB",
        "FilmCode": "HIWBfsdfs47",
        "MovieName": "BAfsfsR",
        "ScreenName": "SCREEN 4",
        "AvailableSeats": "256",
        "SessionId": "115584",
        "ShowTime": "2018-10-26T16:50:00",
        "Cast": null,
        "Status": "available"
      },
      {
        "MovieId": "HO0fsdfs9847",
        "CinemaId": "HIfsdfWB",
        "FilmCode": "HIWBHdfsdfsO00009847",
        "MovieName": "BAAZdfsdfsdfAAR",
        "ScreenName": "SCREEN 4",
        "AvailableSeats": "252",
        "SessionId": "115585",
        "ShowTime": "2018-10-26T19:40:00",
        "Cast": null,
        "Status": "available"
      },
      {
        "MovieId": "HO0fsdfsdf847",
        "CinemaId": "HIWB",
        "FilmCode": "HIfsdfsf9847",
        "MovieName": "BAAZAAR",
        "ScreenName": "SCREEN 4",
        "AvailableSeats": "225",
        "SessionId": "115586",
        "ShowTime": "2018-10-26T22:30:00",
        "Cast": null,
        "Status": "available"
      },
      {
        "MovieId": "Hdfsdfs47",
        "CinemaId": "HIfsdfsWB",
        "FilmCode": "HIWBHOfsdfsdf00009847",
        "MovieName": "fsfsdf",
        "ScreenName": "EBdsfsdfsUNGE",
        "AvailableSeats": "31",
        "SessionId": "115592",
        "ShowTime": "2018-10-26T21:30:00",
        "Cast": null,
        "Status": "available"
      }
    ]
  },
  {
    "CinemaId": "HIWB",
    "FilmCode": "fsdfsf",
    "FilmTitle": "dfsfsO",
    "CinemaName": "dfsfsfl, Ahmedabad",
    "CinemaCity": "fsdfs",
    "CinemaLicenseName": "fsdfsfmedabad",
    "CinemaEmailId": "hisdfsfsfilms.com",
    "CinemaBannerImg": "F&BCombo.jpg",
    "CinemaAddress": "dfsfsfin Road, 380052, ",
    "CinemaMobile": "9dsfsf441",
    "CinemaTel": "0",
    "CinemaLocation": "<iframe src=\"dfdfdsfsdf" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
    "Shows": [
      {
        "MovieId": "HO00fsfs010556",
        "CinemaId": "HfsfsWB",
        "FilmCode": "HIWBHOfdfsf00010556",
        "MovieName": "BAfsfsfAfsfsfsfAI HO",
        "ScreenName": "SCREEN 1",
        "AvailableSeats": "259",
        "SessionId": "115565",
        "ShowTime": "2018-10-26T15:05:00",
        "Cast": null,
        "Status": "available"
      },
      {
        "MovieId": "HO00010556",
        "CinemaId": "HIWB",
        "FilmCode": "HIdfsfs10556",
        "MovieName": "BdfsfHO",
        "ScreenName": "SdfsfN 1",
        "AvailableSeats": "249",
        "SessionId": "115568",
        "ShowTime": "2018-10-26T22:45:00",
        "Cast": null,
        "Status": "available"
      }
    ]
  },
]

Я хочу показать movieId и MovieName из массива Shows

Для этого я сделал код ниже в файле ts

getMovies(CinemaId) {
    this.common.createAPIService('api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId, '').subscribe((result: any) => {
        this.movies = result.Shows;
        console.info(this.movies);
    });
}

И в шаблоне HTML Ниже приведен код

<select formControlName = "cbomovies" id = "cbomovies" class = "form-control" [(ngModel)] = "selectedmovies" (change) = "OnMoviesChange($event)" [ngModelOptions] = "{standalone: true}">
                    <option value = "-1" class = "" selected = "selected">Select Movie</option>
                    <option *ngFor = "let c of movies" [value] = "c.MovieId"> {{c.MovieName}} </option>
                  </select>

Но this.movies выдаёт undefined. Я тоже поменял в html

 <option *ngFor = "let c of movies.Shows" [value] = "c.MovieId"> {{c.MovieName}} </option>

& удалил .Shows из result в файле ts. Это также дает undefined.

Пожалуйста помоги.

Что вы получаете, когда выполняете console.info(result); внутри функции getMovies?

— 26.10.2018 09:44

выше всего ответа

— 26.10.2018 09:45

Затем обратите внимание, что это целый массив, поэтому вы не можете использовать result.Shows, поскольку result - это массив. Итак, управляйте своим кодом соответственно массиву данных

— 26.10.2018 09:46

Что я спрашиваю, как я могу справиться? Я внес указанные выше изменения, но не работаю

— 26.10.2018 09:47

Ваши фильмы асинхронны, попробуйте <option *ngFor = "let c of movies.Shows | async " [value] = "c.MovieId"> {{c.MovieName}} </option> или дайте *ngIf = "movies" на select

— 26.10.2018 09:48

Я считаю, что вам нужно сделать две итерации с ngFor. Первый должен быть: let i of movies, второй (внутри первого) должен быть let shows of i, и вы можете распечатать свою информацию

— 26.10.2018 09:51

у вас есть какой-либо метод внутри службы?

— 26.10.2018 09:52

Если вы получаете более одного кинотеатра при вызове api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId, то там что-то не так. Я предполагаю, что CinemaId должен быть уникальным

— 26.10.2018 09:53

@SarthakAggarwal Это выдает ошибку в консоли. Невозможно прочитать свойство "Shows" неопределенного значения.

— 26.10.2018 09:54

@ mxr7350 Да, это уникально

— 26.10.2018 09:54

Это json, который вы получаете в console.info (this.movies);

— 26.10.2018 09:55

вы инициализировали свой массив фильмов? @SagarKodte

— 26.10.2018 09:57

@SagarKodte, ваш JSON имеет array из 2 cinema objects, оба имеют одинаковый CinemaId, поэтому ваш CinemaId не уникален

— 26.10.2018 09:59

javascript angular angular5 ngfor

26.10.2018 09:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ты можешь сделать:

this.movies = result.reduce((acc, val) => acc.concat(val.Shows), []);

конкатенировать Показывает в один массив. Надеюсь это поможет.

Возможность доступа к шоу.

— 26.10.2018 10:01

26.10.2018 09:50

В верхней части ответа Alex G я хотел бы добавить, что если вы используете подход реактивных форм, вам не следует использовать [(ngModel)] в своем шаблоне.

Ваш шаблон будет значительно упрощен с помощью всего этого:

<form [formGroup] = "form">
  ...
  <select 
    formControlName = "cbomovies" 
    id = "cbomovies" 
    class = "form-control">
    <option value = "null" class = "">Select Movie</option>
    <option *ngFor = "let movie of movies" [value] = "movie.MovieId"> {{movie.MovieName}} </option>
  </select>
  ...
</form>

И в вашем классе компонентов:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { CommonService } from './common.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  movies;
  form: FormGroup;

  constructor(private common: CommonService) {}

  ngOnInit() {
    this.getMovies('');
    this.form = new FormGroup({
      cbomovies: new FormControl()
    });
  }

  getMovies(CinemaId) {
    this.common.createAPIService('api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId, '')
    .subscribe((result: any[]) => {
      this.movies = result.reduce((acc, val) => acc.concat(val.Shows), []);
    });
  }

}

Вот Образец StackBlitz для вашего исх.

26.10.2018 10:17