Angular 6 forms, fetch object into input

Question

can somebody help me to fetch objects with data.name into input this is picture of site form with inputs

this is the code of html of component

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Edit Movie</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form #editMovieForm="ngForm" (ngSubmit)="onSave(editMovieForm)">
      <div class="form-group">
        <label for="runTime">Run Time</label>
        <input
          type="text"
          name="runTime"
          id="runTime"
          class="form-control"
          [(ngModel)]="movie.runtime"
        >
      </div>
      <div class="form-group">
        <label for="genre">Genre</label>
        <input
          type="text"
          name="genre"
          id="genre"
          class="form-control"
          [(ngModel)]="movie.genres"
          value=""
        >
      </div>
      <div class="form-group">
        <label for="cast">Cast</label>
        <input
          type="text"
          name="cast"
          id="cast"
          class="form-control"
          [(ngModel)]="movie.cast"
        >
      </div>
      <input type="submit" class="btn btn-success" value="Save">
      <button
        type="button"
        class="btn btn-danger float-right"
        (click)="onDelete()"
      ><i class="far fa-trash-alt"></i> Remove</button>
    </form>
  </div>
</ng-template>
<button class="btn btn-light mb-2 mr-2" (click)="openBackDropCustomClass(content)">Edit Movie</button>

this is a component

export class EditMovieModalComponent implements OnInit {
  closeResult: string;
  movie: any = new Object();
  id: number;
  constructor(
              private modalService: NgbModal,
              private movieService: MovieRequestService,
              private flashMessage: FlashMessagesService,
              private http: HttpClient,
              private router: Router,
              private route: ActivatedRoute
  ) {
    this.getMovieDetails();
  }
  openBackDropCustomClass(content) {
    this.modalService.open(content, {backdropClass: 'light-blue-backdrop'});
  }
  ngOnInit() {
  }
  getMovieDetails () {
    // Get Id from URL
    this.id = this.route.snapshot.params['id'];
    this.movieService.getMovieDetails(this.id).subscribe(response => this.movie = response.data.movie);
  }
  onDelete () {
    if (confirm('Are you sure ???')) {
      this.movieService.deleteMovie(this.movie);
      this.flashMessage.show('Movie Removed Succes');
    }
  }
  onSave () {}
}

i can't fetch data of cast.name because it an objects how i can do it ? and how i can save edit movie to virtual dom or something in angular ?

Also can you do `console.log(this.movie)` and add the output here ? — Hussein, Oct 01 '18 at 11:44
did you add `console.log(this.movie)` after you fetched the data ? — Hussein, Oct 01 '18 at 11:52
`this.movieService.getMovieDetails(this.id).subscribe(response => { this.movie = response.data.movie; console.log(this.movie) });` — Hussein, Oct 01 '18 at 11:53
well it can't be empty cuz it's showing data in the first image above — Hussein, Oct 01 '18 at 11:56

score 0 · Accepted Answer · answered Oct 01 '18 at 12:32

0

what is "cast" here? is it a string? is it combination of (for example) firstName and lastName? Then it is an object. you need to specify it like: movie.cast.firstName

answered Oct 01 '18 at 12:32

Parnian

28
1
7

array with objects cast": [ { "name": "Bruce Willis", "character_name": "Det. Jack Mosley", "url_small_image": "https://yts.am/assets/images/actors/thumb/nm0000246.jpg", "imdb_code": "0000246" } ] – Anthony Fink Oct 01 '18 at 12:37
So you need to show it like this: movie.cast.name if you want to show the name. – Parnian Oct 01 '18 at 12:39
yeah i try it to do that but i didn't see the cast names. – Anthony Fink Oct 01 '18 at 12:40
as I see your cast is an array of objects that should have been read in other way. Maybe [https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array] this answer helps you. – Parnian Oct 01 '18 at 12:58
thank you but not so understand how it can help me :/ – Anthony Fink Oct 01 '18 at 13:32
can you give me an object of an movie then I make some code in stackBlitz for you? if you do console.log(this.movie) you will get that. – Parnian Oct 01 '18 at 13:42
https://yts.am/api/v2/movie_details.json?movie_id=15&with_images=true&with_cast=true – Anthony Fink Oct 01 '18 at 13:45
imagine that we have a list of movies, you get the movie with id: this.movie. in this.movie there is another array of objects, cast. you need to iterate with a loop to get all of items like this: `
- {{item.name}}
` and you get the name of cast.
– Parnian Oct 01 '18 at 14:16
how i do same in input ? that my question – Anthony Fink Oct 01 '18 at 14:20
you can make another array within copy all your cast with a loop. then read that array and show it in input. but I'm afraid that you can not bind it anymore with ngmodel and you can not edit it also. the best way to do that, I think, make another form under the cast with new ng model that bind it to the another variable. like this: `this.newCast = this.movie.cast;` because your array of cast is so complicated to show it in the simple way in input. now I don't have any idea about the code but I will it try later. – Parnian Oct 01 '18 at 14:50
yeah because it array of objects – Anthony Fink Oct 01 '18 at 15:17

score 0 · Answer 2 · answered Oct 01 '18 at 12:32

0

In angular response will come as Observables and you have to give it a structure to read the data properly and i think you have not defined any structure(interface or class) for Observable, so in that case i think map function will solve your problem. for Ex:

getMovieDetails() {
return this.http.get('your URL')
    .map(res => res);
}

I hope this solves your problem, if not then please post the code where you are making the backend call.

You can refer to this link for understanding Angular HTTP calls and Observables:

Angular HTTP

answered Oct 01 '18 at 12:32

Nilesh Jain

106
8

with observables work service. i'm have problems in component. i fetch data to inputs. but with input cast i have problems – Anthony Fink Oct 01 '18 at 12:45
I can't understand what u asked please post the code and errors u encountered so that i can help u. – Nilesh Jain Oct 01 '18 at 13:18
you seen the picture of page ? in input i fetched data of movie title, year etc but with cast i have problem because from api i got casts like array with objects. in normal page i can use *ngFor for display all Casters but in input i don't know how to do it – Anthony Fink Oct 01 '18 at 13:42
post the code where you are making the call in backend – Nilesh Jain Oct 01 '18 at 13:54
https://yts.am/api/v2/movie_details.json?movie_id=15&with_images=true&with_cast=true this is my backed i can't do nothing there – Anthony Fink Oct 01 '18 at 14:44

Angular 6 forms, fetch object into input

2 Answers2

Linked