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
– Hussein, Commented Oct 1, 2018 at 11:44
did you add console.log(this.movie) after you fetched the data ? — Hussein
– Hussein, Commented Oct 1, 2018 at 11:52

Parnian · Accepted Answer · 2018-10-01 12:32:08Z

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 1, 2018 at 12:32

Parnian

281 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Anthony Fink Over a year ago

array with objects cast": [ { "name": "Bruce Willis", "character_name": "Det. Jack Mosley", "url_small_image": "yts.am/assets/images/actors/thumb/nm0000246.jpg", "imdb_code": "0000246" } ]

Parnian Over a year ago

So you need to show it like this: movie.cast.name if you want to show the name.

Anthony Fink Over a year ago

yeah i try it to do that but i didn't see the cast names.

Parnian Over a year ago

as I see your cast is an array of objects that should have been read in other way. Maybe [stackoverflow.com/questions/19590865/… this answer helps you.

Anthony Fink Over a year ago

thank you but not so understand how it can help me :/

|

Nilesh Jain · Accepted Answer · 2018-10-01 12:32:51Z

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 1, 2018 at 12:32

Nilesh Jain

1268 bronze badges

5 Comments

Anthony Fink Over a year ago

with observables work service. i'm have problems in component. i fetch data to inputs. but with input cast i have problems

Nilesh Jain Over a year ago

I can't understand what u asked please post the code and errors u encountered so that i can help u.

Anthony Fink Over a year ago

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

Nilesh Jain Over a year ago

post the code where you are making the call in backend

Anthony Fink Over a year ago

yts.am/api/v2/… this is my backed i can't do nothing there

Collectives™ on Stack Overflow

Angular 6 forms, fetch object into input

2 Answers 2

11 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related