Получение неопределенного внутреннего массива ответа JSON в угловых

Question

Получение неопределенного внутреннего массива ответа JSON в угловых

1

У меня ниже 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.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>

& .Shows result в файле ts. Это также дает неопределенный.

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

Sagar Kodte 26 окт. 2018, в 09:47

Источник

0

Что вы получаете, когда вы делаете console.log(result); внутри функции getMovies ?
Ankit Agarwal 26 окт. 2018, в 07:44
0

выше всего ответа
Sagar Kodte 26 окт. 2018, в 07:45
0

Затем обратите внимание, что это весь массив, который вы получаете, поэтому вы не можете сделать result result.Shows как result - массив. Итак, управляйте своим кодом соответственно массиву данных
Ankit Agarwal 26 окт. 2018, в 07:46
0

Что я спрашиваю, как я могу управлять? Я сделал выше изменения, но не работает
Sagar Kodte 26 окт. 2018, в 07:47
0

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

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

у вас есть какой-либо метод, кроме службы?
bhaumik shah 26 окт. 2018, в 07:52
0

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

@SarthakAggarwal Это дает мне ошибку в консоли. Не удается прочитать свойство «Показывает» неопределенного
Sagar Kodte 26 окт. 2018, в 07:54
0

@mxr7350 mxr7350 Да, это уникально
Sagar Kodte 26 окт. 2018, в 07:54
0

Это json, который вы получаете на console.log (this.movies);
bhaumik shah 26 окт. 2018, в 07:55
0

Вы инициализировали свой массив фильмов? @SagarKodte
Sarthak Aggarwal 26 окт. 2018, в 07:57
0

@SagarKodte ваш JSON имеет array из 2 cinema objects оба из которых имеют одинаковый CinemaId, поэтому ваш CinemaId не уникален
mxr7350 26 окт. 2018, в 07:59

Показать ещё 11 комментариев

Теги:

angular

javascript

angular5

ngfor

2 ответа

0

На вершине ответа Alex G я хотел бы добавить, что если вы используете подход Reactive Forms, вы не должны использовать [(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 для вашей ссылки.

SiddAjmera 26 окт. 2018, в 05:53

Ещё вопросы

Что вы получаете, когда вы делаете console.log(result); внутри функции getMovies ?
Затем обратите внимание, что это весь массив, который вы получаете, поэтому вы не можете сделать result result.Shows как result - массив. Итак, управляйте своим кодом соответственно массиву данных
Что я спрашиваю, как я могу управлять? Я сделал выше изменения, но не работает
Ваши фильмы асинхронные, попробуйте <option *ngFor="let c of movies.Shows | async " [value]="c.MovieId"> {{c.MovieName}} </option> или *ngIf="movies" на select
Я считаю, что вы должны сделать две итерации с ngFor. Первое должно быть: let i of movies , второе (внутри первого) должно быть let shows of i и вы можете распечатать свою информацию
у вас есть какой-либо метод, кроме службы?
Если при вызове api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId вы получаете более одного кинотеатра api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId что-то не так. Я предполагаю, что CinemaId должен быть уникальным
@SarthakAggarwal Это дает мне ошибку в консоли. Не удается прочитать свойство «Показывает» неопределенного
Это json, который вы получаете на console.log (this.movies);
Вы инициализировали свой массив фильмов? @SagarKodte
@SagarKodte ваш JSON имеет array из 2 cinema objects оба из которых имеют одинаковый CinemaId, поэтому ваш CinemaId не уникален

Alex G · Accepted Answer · 2018-10-26T06-32-00.000Z

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

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

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