在Angular中获取未定义的JSON响应内部数组

Question

I have below JSON from 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"
      }
    ]
  },
]

I want to show movieId and MovieName from Shows array

For that I have done below code in ts file

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

And In HTML Template Below code is there

<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>

But this.movies giving undefined. I also changed in html

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

& removed .Shows from the result in ts file. It also giving undefined.

Please help.

Answer 1

You can do:

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

to concat Shows to a single array. Hope this helps.

Answer 2

On the top of Alex G's answer, I'd like to add that if you're using the Reactive Forms approach, you shouldn't be using [(ngModel)] in your template.

Your template will be significantly simplified with just this:

<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>

And in your Component Class:

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), []);
    });
  }

}

Here's a Sample StackBlitz for your ref.