Mixing
Angular 6 HttpClient using Map
For learning purposes I am trying to get datas from a json fake API and add "hey" to all titles before returning an Observable. So far I can display the data if I don't use Map and even while using map if I console.log my variable it says Observable but it does not display in my template.
<div class="col-6" *ngIf="courseDatas$ | async as courses else NoData">
<div class="card" *ngFor="let course of courses">
<div class="card-body">
<span><strong>User ID is : </strong>{{course.userId}}</span><br>
<span><strong>Title is : </strong>{{course.title}}</span><br>
<span><strong>Body is : </strong>{{course.body}}</span><br>
<span><strong>ID is : </strong>{{course.id}}</span>
</div>
<ng-template #NoData>No Data Available</ng-template>
</div>
</div>
App component :
import {Component, OnInit} from '@angular/core';
import {PostsService} from "./posts.service";
import {Observable} from "rxjs";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
courseDatas$ : Observable<any>;
constructor(private posts : PostsService){}
ngOnInit(){
this.courseDatas$ = this.posts.getData();
}
}
posts Service :
import { Injectable } from '@angular/core'
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class PostsService {
private postURL: string = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
}),
);
}
So, if I don't use the map operator in my getData method in my service everything displays properly. If I use the map operator if I console.log coursesDatas$ in App.Component the console says Observable so I don't understand why it does not work with my async pipe in the template. Also, if I use console.log(datas.title) inside my map operator it does log every titles with Hey at the end.
javascript angular typescript rxjs
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
add a comment |
For learning purposes I am trying to get datas from a json fake API and add "hey" to all titles before returning an Observable. So far I can display the data if I don't use Map and even while using map if I console.log my variable it says Observable but it does not display in my template.
<div class="col-6" *ngIf="courseDatas$ | async as courses else NoData">
<div class="card" *ngFor="let course of courses">
<div class="card-body">
<span><strong>User ID is : </strong>{{course.userId}}</span><br>
<span><strong>Title is : </strong>{{course.title}}</span><br>
<span><strong>Body is : </strong>{{course.body}}</span><br>
<span><strong>ID is : </strong>{{course.id}}</span>
</div>
<ng-template #NoData>No Data Available</ng-template>
</div>
</div>
App component :
import {Component, OnInit} from '@angular/core';
import {PostsService} from "./posts.service";
import {Observable} from "rxjs";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
courseDatas$ : Observable<any>;
constructor(private posts : PostsService){}
ngOnInit(){
this.courseDatas$ = this.posts.getData();
}
}
posts Service :
import { Injectable } from '@angular/core'
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class PostsService {
private postURL: string = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
}),
);
}
So, if I don't use the map operator in my getData method in my service everything displays properly. If I use the map operator if I console.log coursesDatas$ in App.Component the console says Observable so I don't understand why it does not work with my async pipe in the template. Also, if I use console.log(datas.title) inside my map operator it does log every titles with Hey at the end.
javascript angular typescript rxjs
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
Your map callback doesn't actually return anything. You need to tap or, much better (as it doesn't have side effects), return a new array from the callback.
– jonrsharpe
Nov 21 '18 at 16:09
add a comment |
For learning purposes I am trying to get datas from a json fake API and add "hey" to all titles before returning an Observable. So far I can display the data if I don't use Map and even while using map if I console.log my variable it says Observable but it does not display in my template.
<div class="col-6" *ngIf="courseDatas$ | async as courses else NoData">
<div class="card" *ngFor="let course of courses">
<div class="card-body">
<span><strong>User ID is : </strong>{{course.userId}}</span><br>
<span><strong>Title is : </strong>{{course.title}}</span><br>
<span><strong>Body is : </strong>{{course.body}}</span><br>
<span><strong>ID is : </strong>{{course.id}}</span>
</div>
<ng-template #NoData>No Data Available</ng-template>
</div>
</div>
App component :
import {Component, OnInit} from '@angular/core';
import {PostsService} from "./posts.service";
import {Observable} from "rxjs";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
courseDatas$ : Observable<any>;
constructor(private posts : PostsService){}
ngOnInit(){
this.courseDatas$ = this.posts.getData();
}
}
posts Service :
import { Injectable } from '@angular/core'
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class PostsService {
private postURL: string = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
}),
);
}
So, if I don't use the map operator in my getData method in my service everything displays properly. If I use the map operator if I console.log coursesDatas$ in App.Component the console says Observable so I don't understand why it does not work with my async pipe in the template. Also, if I use console.log(datas.title) inside my map operator it does log every titles with Hey at the end.
javascript angular typescript rxjs
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
For learning purposes I am trying to get datas from a json fake API and add "hey" to all titles before returning an Observable. So far I can display the data if I don't use Map and even while using map if I console.log my variable it says Observable but it does not display in my template.
<div class="col-6" *ngIf="courseDatas$ | async as courses else NoData">
<div class="card" *ngFor="let course of courses">
<div class="card-body">
<span><strong>User ID is : </strong>{{course.userId}}</span><br>
<span><strong>Title is : </strong>{{course.title}}</span><br>
<span><strong>Body is : </strong>{{course.body}}</span><br>
<span><strong>ID is : </strong>{{course.id}}</span>
</div>
<ng-template #NoData>No Data Available</ng-template>
</div>
</div>
App component :
import {Component, OnInit} from '@angular/core';
import {PostsService} from "./posts.service";
import {Observable} from "rxjs";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
courseDatas$ : Observable<any>;
constructor(private posts : PostsService){}
ngOnInit(){
this.courseDatas$ = this.posts.getData();
}
}
posts Service :
import { Injectable } from '@angular/core'
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class PostsService {
private postURL: string = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
}),
);
}
So, if I don't use the map operator in my getData method in my service everything displays properly. If I use the map operator if I console.log coursesDatas$ in App.Component the console says Observable so I don't understand why it does not work with my async pipe in the template. Also, if I use console.log(datas.title) inside my map operator it does log every titles with Hey at the end.
javascript angular typescript rxjs
javascript angular typescript rxjs
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
edited Nov 21 '18 at 16:10
Jean-Philippe Dufour
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
asked Nov 21 '18 at 16:08
Jean-Philippe DufourJean-Philippe Dufour
297
297
Your map callback doesn't actually return anything. You need to tap or, much better (as it doesn't have side effects), return a new array from the callback.
– jonrsharpe
Nov 21 '18 at 16:09
add a comment |
Your map callback doesn't actually return anything. You need to tap or, much better (as it doesn't have side effects), return a new array from the callback.
– jonrsharpe
Nov 21 '18 at 16:09
Your map callback doesn't actually return anything. You need to tap or, much better (as it doesn't have side effects), return a new array from the callback.
– jonrsharpe
Nov 21 '18 at 16:09
Your map callback doesn't actually return anything. You need to tap or, much better (as it doesn't have side effects), return a new array from the callback.
– jonrsharpe
Nov 21 '18 at 16:09
add a comment |
1 Answer
1
active
oldest
votes
map should return something to mutate current property, in your case I guess you should return the data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
return data;
}),
);
}
by the way you can use Array.prototype's map instead of for loop too, to mutate your data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => data.map(d => (d.title = d.title +"Hey", d));
}),
);
}
note that if curly braces are missing in arrow function, it will return automatically
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
Good to know about the automatic return. I forgot about it. I cannot get map(data => data.map(d => d.title = d.title +"Hey"); to work tho. Also thanks for your inputs
– Jean-Philippe Dufour
Nov 21 '18 at 16:24
@Jean-PhilippeDufour what output do you get ?
– Artyom Amiryan
Nov 21 '18 at 16:26
@Jean-PhilippeDufour I have fixed it, please check again
– Artyom Amiryan
Nov 21 '18 at 16:28
Works just fine. Thanks. That was a little dumb of me I didn't even check the correct implementation for the map.
– Jean-Philippe Dufour
Nov 21 '18 at 16:34
@Jean-PhilippeDufour glad to help, if it works for you please mark as accepted answer
– Artyom Amiryan
Nov 21 '18 at 16:38
add a comment |
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
});
}
});
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%2f53416115%2fangular-6-httpclient-using-map%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
map should return something to mutate current property, in your case I guess you should return the data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
return data;
}),
);
}
by the way you can use Array.prototype's map instead of for loop too, to mutate your data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => data.map(d => (d.title = d.title +"Hey", d));
}),
);
}
note that if curly braces are missing in arrow function, it will return automatically
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
Good to know about the automatic return. I forgot about it. I cannot get map(data => data.map(d => d.title = d.title +"Hey"); to work tho. Also thanks for your inputs
– Jean-Philippe Dufour
Nov 21 '18 at 16:24
@Jean-PhilippeDufour what output do you get ?
– Artyom Amiryan
Nov 21 '18 at 16:26
@Jean-PhilippeDufour I have fixed it, please check again
– Artyom Amiryan
Nov 21 '18 at 16:28
Works just fine. Thanks. That was a little dumb of me I didn't even check the correct implementation for the map.
– Jean-Philippe Dufour
Nov 21 '18 at 16:34
@Jean-PhilippeDufour glad to help, if it works for you please mark as accepted answer
– Artyom Amiryan
Nov 21 '18 at 16:38
add a comment |
map should return something to mutate current property, in your case I guess you should return the data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
return data;
}),
);
}
by the way you can use Array.prototype's map instead of for loop too, to mutate your data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => data.map(d => (d.title = d.title +"Hey", d));
}),
);
}
note that if curly braces are missing in arrow function, it will return automatically
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
Good to know about the automatic return. I forgot about it. I cannot get map(data => data.map(d => d.title = d.title +"Hey"); to work tho. Also thanks for your inputs
– Jean-Philippe Dufour
Nov 21 '18 at 16:24
@Jean-PhilippeDufour what output do you get ?
– Artyom Amiryan
Nov 21 '18 at 16:26
@Jean-PhilippeDufour I have fixed it, please check again
– Artyom Amiryan
Nov 21 '18 at 16:28
Works just fine. Thanks. That was a little dumb of me I didn't even check the correct implementation for the map.
– Jean-Philippe Dufour
Nov 21 '18 at 16:34
@Jean-PhilippeDufour glad to help, if it works for you please mark as accepted answer
– Artyom Amiryan
Nov 21 '18 at 16:38
add a comment |
map should return something to mutate current property, in your case I guess you should return the data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
return data;
}),
);
}
by the way you can use Array.prototype's map instead of for loop too, to mutate your data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => data.map(d => (d.title = d.title +"Hey", d));
}),
);
}
note that if curly braces are missing in arrow function, it will return automatically
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
map should return something to mutate current property, in your case I guess you should return the data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => {
for (let datas of (data as Array<any>)){
datas.title = datas.title + "Hey";
}
return data;
}),
);
}
by the way you can use Array.prototype's map instead of for loop too, to mutate your data
getData(): Observable<any> {
return this.http.get(this.postURL).pipe(
map(data => data.map(d => (d.title = d.title +"Hey", d));
}),
);
}
note that if curly braces are missing in arrow function, it will return automatically
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
edited Nov 21 '18 at 16:27
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
answered Nov 21 '18 at 16:12
Artyom AmiryanArtyom Amiryan
1,9371214
1,9371214
Good to know about the automatic return. I forgot about it. I cannot get map(data => data.map(d => d.title = d.title +"Hey"); to work tho. Also thanks for your inputs
– Jean-Philippe Dufour
Nov 21 '18 at 16:24
@Jean-PhilippeDufour what output do you get ?
– Artyom Amiryan
Nov 21 '18 at 16:26
@Jean-PhilippeDufour I have fixed it, please check again
– Artyom Amiryan
Nov 21 '18 at 16:28
Works just fine. Thanks. That was a little dumb of me I didn't even check the correct implementation for the map.
– Jean-Philippe Dufour
Nov 21 '18 at 16:34
@Jean-PhilippeDufour glad to help, if it works for you please mark as accepted answer
– Artyom Amiryan
Nov 21 '18 at 16:38
add a comment |
Good to know about the automatic return. I forgot about it. I cannot get map(data => data.map(d => d.title = d.title +"Hey"); to work tho. Also thanks for your inputs
– Jean-Philippe Dufour
Nov 21 '18 at 16:24
@Jean-PhilippeDufour what output do you get ?
– Artyom Amiryan
Nov 21 '18 at 16:26
@Jean-PhilippeDufour I have fixed it, please check again
– Artyom Amiryan
Nov 21 '18 at 16:28
Works just fine. Thanks. That was a little dumb of me I didn't even check the correct implementation for the map.
– Jean-Philippe Dufour
Nov 21 '18 at 16:34
@Jean-PhilippeDufour glad to help, if it works for you please mark as accepted answer
– Artyom Amiryan
Nov 21 '18 at 16:38
Good to know about the automatic return. I forgot about it. I cannot get map(data => data.map(d => d.title = d.title +"Hey"); to work tho. Also thanks for your inputs
– Jean-Philippe Dufour
Nov 21 '18 at 16:24
Good to know about the automatic return. I forgot about it. I cannot get map(data => data.map(d => d.title = d.title +"Hey"); to work tho. Also thanks for your inputs
– Jean-Philippe Dufour
Nov 21 '18 at 16:24
@Jean-PhilippeDufour what output do you get ?
– Artyom Amiryan
Nov 21 '18 at 16:26
@Jean-PhilippeDufour what output do you get ?
– Artyom Amiryan
Nov 21 '18 at 16:26
@Jean-PhilippeDufour I have fixed it, please check again
– Artyom Amiryan
Nov 21 '18 at 16:28
@Jean-PhilippeDufour I have fixed it, please check again
– Artyom Amiryan
Nov 21 '18 at 16:28
Works just fine. Thanks. That was a little dumb of me I didn't even check the correct implementation for the map.
– Jean-Philippe Dufour
Nov 21 '18 at 16:34
Works just fine. Thanks. That was a little dumb of me I didn't even check the correct implementation for the map.
– Jean-Philippe Dufour
Nov 21 '18 at 16:34
@Jean-PhilippeDufour glad to help, if it works for you please mark as accepted answer
– Artyom Amiryan
Nov 21 '18 at 16:38
@Jean-PhilippeDufour glad to help, if it works for you please mark as accepted answer
– Artyom Amiryan
Nov 21 '18 at 16:38
add a comment |
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.
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%2f53416115%2fangular-6-httpclient-using-map%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
Your map callback doesn't actually return anything. You need to tap or, much better (as it doesn't have side effects), return a new array from the callback.
– jonrsharpe
Nov 21 '18 at 16:09