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

Question

我有 api

JSON 以下

 [
  {
    "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"
      }
    ]
  },
]

我想显示 Shows 数组

中的 movieId 和 MovieName

为此，我在 ts 文件中完成了以下代码

getMovies(CinemaId) {
    this.common.createAPIService('api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId, '').subscribe((result: any) => {
        this.movies = result.Shows;
        console.log(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 未定义。我也在 html

中进行了更改

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

& 从 ts 文件的 result 中删除了 .Shows。它还给出了 undefined.

请帮忙。

Answer 1

你可以这样做：

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

连接显示到单个数组。希望这有帮助。

Answer 2

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

在你的组件中 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), []);
    });
  }

}

这里有一个 Sample StackBlitz 供您参考。

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

Getting undefined of inner array of JSON response in angular

javascript

ngfor

angular

angular5