Javascript 在angular中获取JSON响应的内部数组的未定义
下面是api中的JSONJavascript 在angular中获取JSON响应的内部数组的未定义,javascript,angular,angular5,ngfor,Javascript,Angular,Angular5,Ngfor,下面是api中的JSON [ { "CinemaId": "Hfsdfsdfs", "FilmCode": "HIWdfsdfsfsf47", "FilmTitle": "BAfsdfAAR", "CinemaName": "CsfsnfsfsAhmedabad", "CinemaCity": "Ahmedabad", "CinemaLicenseName": "BIGdfsfsAhmedabad", "CinemaEmailId":
[
{
"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"
}
]
},
]
在下面的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>
&已删除。从ts
文件中的结果中显示。它也给出了未定义的
请帮助。您可以:
this.movies = result.reduce((acc, val) => acc.concat(val.Shows), []);
到concat显示到单个数组。希望这能有所帮助。在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>
下面是一个参考文件。在执行console.log(结果)时会得到什么代码>内部getMovies
函数?在整个响应之上请注意,它是您得到的整个数组,因此您无法执行结果。显示为result
是数组。所以,根据我要问的数组数据来管理代码,如何管理?我已经做了以上更改,但无法运行您的电影是异步的,请尝试{{{c.MovieName}
或在上选择*ngIf=“movies”
以访问节目。
this.movies = result.reduce((acc, val) => acc.concat(val.Shows), []);
<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), []);
});
}
}