Develop Reference

Error: Unreachable code detected ionic 3 weather app

Ok, so I am following along the traversy media tutorial on ionic 3, and when i get to the part where you create a provider I get and error that says unreachable code detected in here:
.map((res: Response) => res.json() );
and it also says on typescript
cannot find the name 'map' did you mean 'Map'?
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import 'rxjs/add/operator/map';
#Injectable()
export class WeatherProvider {
apiKey = "89cca14f4ffcd27d602ad5e587f8e17f";
url;
constructor(public http: HttpClient) {
console.log('Hello WeatherProvider Provider');
this.url = "api.openweathermap.org/data/2.5/weather?q=";
}
getWeather(city, country){
return this.http.get(this.url+city+','+country);
.map((res: Response) => res.json() );
}
}

The return statement in getWeather() is making the .map() unreachable. You should make the return statement the last statement in the function.

error TS2339: Property 'map' does not exist on type 'Observable<Response>'

I am trying to get data from mongodb, for which I have written a service. But I am getting an error like error TS2339: Property 'map' does not exist on type 'Observable<Response>'
Please help me to resolve this error...
import { Injectable } from '#angular/core';
import { Http, Headers, RequestOptions } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class DataService {
result:any;
constructor(private _http: Http) { }
getUsers() {
return this._http.get("/api/users")
.map(result => this.result = result.json().data);
}
}

You have to import and use the map operator differently:
Change
import 'rxjs/add/operator/map';
to
import { map } from 'rxjs/operators';
Then, do
return this._http.get("/api/users")
.pipe(map(result => this.result = result.json().data));
Addiontal suggestion from Vikas
Migrate from the Http service to the HttpClient. see migration guide
To update to HttpClient, you’ll need to replace HttpModule with
HttpClientModule from #angular/common/http in each of your modules,
inject the HttpClient service, and remove any map(res => res.json())
calls, which are no longer needed.

Observables with angular 2 isn't working (Http method)

I'm having trouble with my service. I have a service wich get a JSON from the HTTP module and fill a class 'olders' with it. But when I call my service, it doesn't do anything and my class olders is still undifined...
And if I make a *ngFor directive in the yearbook.component.html, I just get nothing...
I think my problem came from my service, but I don't know where is the error...
Even if i put the console.log inside of the subscribe
my yearbook.component :
import {Component} from '#angular/core'
import {Olders} from './olders'
import {OldersService} from './olders.service'
#Component({
moduleId: module.id,
selector: 'yearbook',
templateUrl: 'yearbook.component.html',
})
export class YearbookComponent {
olders : Olders[];
constructor(
private _oldersService : OldersService
){}
ngOnInit() {
this._oldersService.getOldersfromAPI()
.subscribe( res => {this.olders = res,
console.log(this.olders)},
err => console.error(err.status)
);
}
}
and the olders.service :
import {Injectable} from '#angular/core'
import {Http} from '#angular/http'
import {Olders} from './olders'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/do'
#Injectable ()
export class OldersService {
constructor(private _http:Http) {
}
getOldersfromAPI(){
return this._http.get('../CDN/olders.json')
.do(x => console.log(x))
.map(olders => {olders = olders.json()});
}
}
Thanks in advance for all your answers guys

You are missing a return statement in your mapping:
.map(olders => {olders = olders.json()});
should be:
.map(olders => { return olders = olders.json()});

Ionic2, Angular2, HTTP and Observables

After reading almost everything I found about observables, I still don't understand pretty well how they work.
I am doing the http request here:
import { Component, OnInit, Injectable } from '#angular/core';
import { Http, Response, Headers, RequestOptions } from '#angular/http';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
#Injectable()
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
webs: any;
getWebs(): any{
return this.http.get( 'here the url' )
.map((res: Response) => res.json());
}
constructor(public navCtrl: NavController, private http: Http) {}
ngOnInit(){
this.getWebs().subscribe(response => {
this.webs = response;
console.log(this.webs);
});
}
}
On the console, this.webs is correctly printed. That means, the get request ist working fine and I am retrieving the object I want. That is a normal JSON object.
The problem is, on the view, if I try to print some property of the object (the same properties I see on the console) like that
{{ webs.name }}
I get the whole time that error:
Error in ./HomePage class HomePage - caused by: Cannot read property 'name' of undefined
That was sooo easy with Angular 1 :( I already read a lot of tutorials but I can't find any answer to my problem.
Thanks for your help.

The view is shown before the http response is returned.
{{webs?.name}}
should work.
Or do this.webs=getWebs()
and {{webs.name | async}}

It should be something
this.getWebs().then((webs) => {
webs.subscribe(response => {
this.webs = response;
resolve(webs);
console.log(this.webs);
});
})
so after you getWebs do this.This is untested code but you get the logic.
You are calling before you get data.
ngOnInit(){
return new Promise(resolve => {
this.http.get('webs.json')
.map(res => res.json())
.subscribe(webs => {
this.webs = webs;
resolve(this.webs);
});
});
}

Ionic 2 - Importing/Injecting Angular 2 HTTP Component

I have an ionic 2 app that I've been testing using local data. Now, I am attempting to make some Ajax requests to my api to get the data.
In my app.js file, I am defining my component like so:
import {UserProvider} from './providers/user-provider';
...
#App({
templateUrl: 'build/app.html',
providers: [UserProvider]
})
Then, my user-provider.js file is defined like so:
import {Injectable} from 'angular2/core';
import {Http, httpInjectables} from 'angular2/http';
#Injectable()
export class UserProvider {
constructor(http: Http) {
http.get('www.someURL.com').toRx().map(res => res.json())
.subscribe(data => console.log(data));
}
}
Then, lastly, I am initializing my "Sign Up" view with my signup.js file:
import {Page, NavController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {UserProvider} from '../../providers/user-provider';
#Page({
templateUrl: 'build/pages/signup/signup.html'
})
export class SignupPage {
constructor(nav: NavController, userProvider: UserProvider) {
this.userProvider = userProvider;
this.nav = nav;
}
}
My expected result is that on initialization of my signup view, the UserProvider will be injected. As such, it's constructor will run, which will fire off the http.get function within the UserProvider's constructor. I should then see a network call in my browsers network tab.
However, I'm getting this error:
EXCEPTION: Error during instantiation of UserProvider! (SignupPage -> UserProvider)
app.bundle.js:33693 TypeError: http.get(...).toRx is not a function
at new UserProvider (app.bundle.js:60706)
Why is http.get.toRx() causing an error? I initially tried this with promises like so:
http.get('www.someURL.com').then(() => {
console.log('test');
});
but that throws a similar error.

In angular2-beta0 http.get() already returns an Observable, you don't need to call its former .toRx() method, you can just directly call .map() and such.