Angular 7 POST API function JSON to Observable
-2
Angular 7 POST API function
when i click to create the movie it creates it empty.
i think its because the json is too big and i need to convert it to my Model, how do i do that?
thats my Code:
html:
<form>
<input name="title" [(ngModel)]="title" placeholder="Batman" class="form-
control"/>
<button type="send" style="margin-top:10px;" (click)="searchMovie(title)"
class="btn btn-success btn-block">Search</button>
</form>
<div style="margin-top:10px;" class="col-md-3" *ngFor="let movie of
movies.Search">
<div class="card text-center">
<div class="card-header bg-dark text-white d-flex justify-content-between
align-items-center">
{{movie.Title}}
</div>
<img [src] class="card-img-top" [src]="movie.Poster">
<div class="card-body">
<p>{{movie.Title}}</p>
<p>{{movie.Year}}</p>
<p>{{movie.Runtime}}</p>
<p>{{movie.Genre}}</p>
<p>{{movie.Director}}</p>
<a (click)="addMovie(movie.imdbID)" class="btn btn-info btn-block">
ADD TO MY MOVIES
</a>
</div>
</div>
</div>
SEARCH-MOVIE COMPONENT FUNCTION GET THE JSON OF THE MOVIE
addMovie(id){
this.dataService.getMovieFromOmdb(id).subscribe(
response => this.dataService.saveMovie(<Movie>response));
// this.dataService.getMovieFromOmdb(id).subscribe(
// movie => this.movie=movie);
this.router.navigate(['/home']);
}
SERVICE FUNCTION SAVE THE MOVIE TO THE DB VIA REST
saveMovie(movie1 : Movie)
{
console.log(<Movie>movie1);
console.log(this.movie);
this.http.post(`${this.API_URI}/movies`,<Movie>this.movie)
.subscribe(
res => {
console.log(res);
this.getMovies();
},
err => console.error(err)
)
}
And i have the model Movie
movie: Movie = {
Title: '',
Year: 0,
Runtime: 0,
Genre: '',
Director: '',
Poster: ''
};
can you please help me and tell me why it creates the movie with no data.
thats what happen when i click on "add to my movies" function:
it is successed to get the movie that i want but when i try to post it it posts the null movie.
json angular
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
|
show 2 more comments
-2
Angular 7 POST API function
when i click to create the movie it creates it empty.
i think its because the json is too big and i need to convert it to my Model, how do i do that?
thats my Code:
html:
<form>
<input name="title" [(ngModel)]="title" placeholder="Batman" class="form-
control"/>
<button type="send" style="margin-top:10px;" (click)="searchMovie(title)"
class="btn btn-success btn-block">Search</button>
</form>
<div style="margin-top:10px;" class="col-md-3" *ngFor="let movie of
movies.Search">
<div class="card text-center">
<div class="card-header bg-dark text-white d-flex justify-content-between
align-items-center">
{{movie.Title}}
</div>
<img [src] class="card-img-top" [src]="movie.Poster">
<div class="card-body">
<p>{{movie.Title}}</p>
<p>{{movie.Year}}</p>
<p>{{movie.Runtime}}</p>
<p>{{movie.Genre}}</p>
<p>{{movie.Director}}</p>
<a (click)="addMovie(movie.imdbID)" class="btn btn-info btn-block">
ADD TO MY MOVIES
</a>
</div>
</div>
</div>
SEARCH-MOVIE COMPONENT FUNCTION GET THE JSON OF THE MOVIE
addMovie(id){
this.dataService.getMovieFromOmdb(id).subscribe(
response => this.dataService.saveMovie(<Movie>response));
// this.dataService.getMovieFromOmdb(id).subscribe(
// movie => this.movie=movie);
this.router.navigate(['/home']);
}
SERVICE FUNCTION SAVE THE MOVIE TO THE DB VIA REST
saveMovie(movie1 : Movie)
{
console.log(<Movie>movie1);
console.log(this.movie);
this.http.post(`${this.API_URI}/movies`,<Movie>this.movie)
.subscribe(
res => {
console.log(res);
this.getMovies();
},
err => console.error(err)
)
}
And i have the model Movie
movie: Movie = {
Title: '',
Year: 0,
Runtime: 0,
Genre: '',
Director: '',
Poster: ''
};
can you please help me and tell me why it creates the movie with no data.
thats what happen when i click on "add to my movies" function:
it is successed to get the movie that i want but when i try to post it it posts the null movie.
json angular
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
Are you sure you post the right movie variable? If the response is a json you can make a class from it.
– Gabor Sari
Jan 18 at 19:52
i know i need to put "movie1" to the post but when i do that the post doesnt work at all.. so for the example i posted the this.movie. can you please tell me what do u mean class of the json? im trying like 3 days to solve this problem with no sucess..
– Yair Gabbay
Jan 18 at 20:40
Can you show us the error? Why post doesnt work? Please make sure you get the right response. You can try with Object.assign(), or JSON.parse().
– Gabor Sari
Jan 18 at 20:49
When i post my response it doesnt even get to the code of the post. i dont know there is no error.. but when i send him this.movie instead of the response it does post it. i think i need to conver the response to the MOVIE MODAL but i dont sure how to do it... this is my response{Title: "Batman Begins", Year: "2005", Rated: "PG-13", Released: "15 Jun 2005", Runtime: "140 min", …}
– Yair Gabbay
Jan 18 at 21:54
Lets say we have a Movie class. Then: let m:Movie= Object.assign(new Movie(), JSON.parse(response)); (where response is from getMovieFromOmdb) And try console log and pass this variable to saveMovie
– Gabor Sari
Jan 18 at 22:45
|
show 2 more comments
-2
-2
-2
Angular 7 POST API function
when i click to create the movie it creates it empty.
i think its because the json is too big and i need to convert it to my Model, how do i do that?
thats my Code:
html:
<form>
<input name="title" [(ngModel)]="title" placeholder="Batman" class="form-
control"/>
<button type="send" style="margin-top:10px;" (click)="searchMovie(title)"
class="btn btn-success btn-block">Search</button>
</form>
<div style="margin-top:10px;" class="col-md-3" *ngFor="let movie of
movies.Search">
<div class="card text-center">
<div class="card-header bg-dark text-white d-flex justify-content-between
align-items-center">
{{movie.Title}}
</div>
<img [src] class="card-img-top" [src]="movie.Poster">
<div class="card-body">
<p>{{movie.Title}}</p>
<p>{{movie.Year}}</p>
<p>{{movie.Runtime}}</p>
<p>{{movie.Genre}}</p>
<p>{{movie.Director}}</p>
<a (click)="addMovie(movie.imdbID)" class="btn btn-info btn-block">
ADD TO MY MOVIES
</a>
</div>
</div>
</div>
SEARCH-MOVIE COMPONENT FUNCTION GET THE JSON OF THE MOVIE
addMovie(id){
this.dataService.getMovieFromOmdb(id).subscribe(
response => this.dataService.saveMovie(<Movie>response));
// this.dataService.getMovieFromOmdb(id).subscribe(
// movie => this.movie=movie);
this.router.navigate(['/home']);
}
SERVICE FUNCTION SAVE THE MOVIE TO THE DB VIA REST
saveMovie(movie1 : Movie)
{
console.log(<Movie>movie1);
console.log(this.movie);
this.http.post(`${this.API_URI}/movies`,<Movie>this.movie)
.subscribe(
res => {
console.log(res);
this.getMovies();
},
err => console.error(err)
)
}
And i have the model Movie
movie: Movie = {
Title: '',
Year: 0,
Runtime: 0,
Genre: '',
Director: '',
Poster: ''
};
can you please help me and tell me why it creates the movie with no data.
thats what happen when i click on "add to my movies" function:
it is successed to get the movie that i want but when i try to post it it posts the null movie.
json angular
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
Angular 7 POST API function
when i click to create the movie it creates it empty.
i think its because the json is too big and i need to convert it to my Model, how do i do that?
thats my Code:
html:
<form>
<input name="title" [(ngModel)]="title" placeholder="Batman" class="form-
control"/>
<button type="send" style="margin-top:10px;" (click)="searchMovie(title)"
class="btn btn-success btn-block">Search</button>
</form>
<div style="margin-top:10px;" class="col-md-3" *ngFor="let movie of
movies.Search">
<div class="card text-center">
<div class="card-header bg-dark text-white d-flex justify-content-between
align-items-center">
{{movie.Title}}
</div>
<img [src] class="card-img-top" [src]="movie.Poster">
<div class="card-body">
<p>{{movie.Title}}</p>
<p>{{movie.Year}}</p>
<p>{{movie.Runtime}}</p>
<p>{{movie.Genre}}</p>
<p>{{movie.Director}}</p>
<a (click)="addMovie(movie.imdbID)" class="btn btn-info btn-block">
ADD TO MY MOVIES
</a>
</div>
</div>
</div>
SEARCH-MOVIE COMPONENT FUNCTION GET THE JSON OF THE MOVIE
addMovie(id){
this.dataService.getMovieFromOmdb(id).subscribe(
response => this.dataService.saveMovie(<Movie>response));
// this.dataService.getMovieFromOmdb(id).subscribe(
// movie => this.movie=movie);
this.router.navigate(['/home']);
}
SERVICE FUNCTION SAVE THE MOVIE TO THE DB VIA REST
saveMovie(movie1 : Movie)
{
console.log(<Movie>movie1);
console.log(this.movie);
this.http.post(`${this.API_URI}/movies`,<Movie>this.movie)
.subscribe(
res => {
console.log(res);
this.getMovies();
},
err => console.error(err)
)
}
And i have the model Movie
movie: Movie = {
Title: '',
Year: 0,
Runtime: 0,
Genre: '',
Director: '',
Poster: ''
};
can you please help me and tell me why it creates the movie with no data.
thats what happen when i click on "add to my movies" function:
it is successed to get the movie that i want but when i try to post it it posts the null movie.
json angular
json angular
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
edited Jan 18 at 19:53
Yair Gabbay
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
asked Jan 18 at 18:48
Yair GabbayYair Gabbay
245
245
Are you sure you post the right movie variable? If the response is a json you can make a class from it.
– Gabor Sari
Jan 18 at 19:52
i know i need to put "movie1" to the post but when i do that the post doesnt work at all.. so for the example i posted the this.movie. can you please tell me what do u mean class of the json? im trying like 3 days to solve this problem with no sucess..
– Yair Gabbay
Jan 18 at 20:40
Can you show us the error? Why post doesnt work? Please make sure you get the right response. You can try with Object.assign(), or JSON.parse().
– Gabor Sari
Jan 18 at 20:49
When i post my response it doesnt even get to the code of the post. i dont know there is no error.. but when i send him this.movie instead of the response it does post it. i think i need to conver the response to the MOVIE MODAL but i dont sure how to do it... this is my response{Title: "Batman Begins", Year: "2005", Rated: "PG-13", Released: "15 Jun 2005", Runtime: "140 min", …}
– Yair Gabbay
Jan 18 at 21:54
Lets say we have a Movie class. Then: let m:Movie= Object.assign(new Movie(), JSON.parse(response)); (where response is from getMovieFromOmdb) And try console log and pass this variable to saveMovie
– Gabor Sari
Jan 18 at 22:45
|
show 2 more comments
Are you sure you post the right movie variable? If the response is a json you can make a class from it.
– Gabor Sari
Jan 18 at 19:52
i know i need to put "movie1" to the post but when i do that the post doesnt work at all.. so for the example i posted the this.movie. can you please tell me what do u mean class of the json? im trying like 3 days to solve this problem with no sucess..
– Yair Gabbay
Jan 18 at 20:40
Can you show us the error? Why post doesnt work? Please make sure you get the right response. You can try with Object.assign(), or JSON.parse().
– Gabor Sari
Jan 18 at 20:49
When i post my response it doesnt even get to the code of the post. i dont know there is no error.. but when i send him this.movie instead of the response it does post it. i think i need to conver the response to the MOVIE MODAL but i dont sure how to do it... this is my response{Title: "Batman Begins", Year: "2005", Rated: "PG-13", Released: "15 Jun 2005", Runtime: "140 min", …}
– Yair Gabbay
Jan 18 at 21:54
Lets say we have a Movie class. Then: let m:Movie= Object.assign(new Movie(), JSON.parse(response)); (where response is from getMovieFromOmdb) And try console log and pass this variable to saveMovie
– Gabor Sari
Jan 18 at 22:45
Are you sure you post the right movie variable? If the response is a json you can make a class from it.
– Gabor Sari
Jan 18 at 19:52
Are you sure you post the right movie variable? If the response is a json you can make a class from it.
– Gabor Sari
Jan 18 at 19:52
i know i need to put "movie1" to the post but when i do that the post doesnt work at all.. so for the example i posted the this.movie. can you please tell me what do u mean class of the json? im trying like 3 days to solve this problem with no sucess..
– Yair Gabbay
Jan 18 at 20:40
i know i need to put "movie1" to the post but when i do that the post doesnt work at all.. so for the example i posted the this.movie. can you please tell me what do u mean class of the json? im trying like 3 days to solve this problem with no sucess..
– Yair Gabbay
Jan 18 at 20:40
Can you show us the error? Why post doesnt work? Please make sure you get the right response. You can try with Object.assign(), or JSON.parse().
– Gabor Sari
Jan 18 at 20:49
Can you show us the error? Why post doesnt work? Please make sure you get the right response. You can try with Object.assign(), or JSON.parse().
– Gabor Sari
Jan 18 at 20:49
When i post my response it doesnt even get to the code of the post. i dont know there is no error.. but when i send him this.movie instead of the response it does post it. i think i need to conver the response to the MOVIE MODAL but i dont sure how to do it... this is my response{Title: "Batman Begins", Year: "2005", Rated: "PG-13", Released: "15 Jun 2005", Runtime: "140 min", …}
– Yair Gabbay
Jan 18 at 21:54
When i post my response it doesnt even get to the code of the post. i dont know there is no error.. but when i send him this.movie instead of the response it does post it. i think i need to conver the response to the MOVIE MODAL but i dont sure how to do it... this is my response{Title: "Batman Begins", Year: "2005", Rated: "PG-13", Released: "15 Jun 2005", Runtime: "140 min", …}
– Yair Gabbay
Jan 18 at 21:54
Lets say we have a Movie class. Then: let m:Movie= Object.assign(new Movie(), JSON.parse(response)); (where response is from getMovieFromOmdb) And try console log and pass this variable to saveMovie
– Gabor Sari
Jan 18 at 22:45
Lets say we have a Movie class. Then: let m:Movie= Object.assign(new Movie(), JSON.parse(response)); (where response is from getMovieFromOmdb) And try console log and pass this variable to saveMovie
– Gabor Sari
Jan 18 at 22:45
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54259839%2fangular-7-post-api-function-json-to-observable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54259839%2fangular-7-post-api-function-json-to-observable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you sure you post the right movie variable? If the response is a json you can make a class from it.
– Gabor Sari
Jan 18 at 19:52
i know i need to put "movie1" to the post but when i do that the post doesnt work at all.. so for the example i posted the this.movie. can you please tell me what do u mean class of the json? im trying like 3 days to solve this problem with no sucess..
– Yair Gabbay
Jan 18 at 20:40
Can you show us the error? Why post doesnt work? Please make sure you get the right response. You can try with Object.assign(), or JSON.parse().
– Gabor Sari
Jan 18 at 20:49
When i post my response it doesnt even get to the code of the post. i dont know there is no error.. but when i send him this.movie instead of the response it does post it. i think i need to conver the response to the MOVIE MODAL but i dont sure how to do it... this is my response{Title: "Batman Begins", Year: "2005", Rated: "PG-13", Released: "15 Jun 2005", Runtime: "140 min", …}
– Yair Gabbay
Jan 18 at 21:54
Lets say we have a Movie class. Then: let m:Movie= Object.assign(new Movie(), JSON.parse(response)); (where response is from getMovieFromOmdb) And try console log and pass this variable to saveMovie
– Gabor Sari
Jan 18 at 22:45