javascript - 以 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.movi​​es 未定义。我也在html中更改了

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

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

请帮忙。

Answer 1

你可以这样做:

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

to concat 显示为单个数组。希望这会有所帮助。