API call problem

Ionic Framework ionic-v3
1

Hello guys I am new to Ionic C: and I have a first problem and I can not solve: C i call the deezer API and receive the expected response

getProfiles(){
this.http.get(‘https://api.myjson.com/bins/mcjrb’)
.map( res => res.json())
.subscribe(data => {
console.log(data);
});

No problem

But when I change the url I no longer receive the response of the api

getProfiles(){

this.http.get('api.openweathermap.org/data/2.5/forecast?id=524901&APPID=7981ddbe4d2dfb962eec709fd94b654c ')
.map( res => res.json())
.subscribe(data => {
  console.log(data);

}

the error:

 http://localhost:8100/api.openweathermap.org/data/2.5/weather?q=London&appid=7981ddbe4d2dfb962eec709fd94b654c 404 (Not Found)
u @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMacroTask @ polyfills.js:3
(anonymous) @ polyfills.js:3
r.(anonymous function) @ polyfills.js:2
(anonymous) @ http.es5.js:1278
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
MapOperator.call @ map.js:54
Observable.subscribe @ Observable.js:42
MeteoServiceProvider.getProfiles @ meteo-service.ts:16
PlayacorazonesPage.ionViewDidLoad @ playacorazones.ts:39
ViewController._lifecycle @ view-controller.js:564
ViewController._didLoad @ view-controller.js:437
NavControllerBase._didLoad @ nav-controller-base.js:942
t.invoke @ polyfills.js:3
onInvoke @ core.es5.js:4149
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.es5.js:4017
NavControllerBase._viewAttachToDOM @ nav-controller-base.js:590
NavControllerBase._transition @ nav-controller-base.js:679
(anonymous) @ nav-controller-base.js:361
t.invoke @ polyfills.js:3
onInvoke @ core.es5.js:4149
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.es5.js:4140
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
invoke @ polyfills.js:3


core.es5.js:1084 
ERROR Response {_body: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta char…ermap.org/data/2.5/weather</pre>↵</body>↵</html>↵", status: 404, ok: false, statusText: "Not Found", headers: Headers…}

When testing the second url in the browser gives me the corresponding json

2

Hi,

If you can run the app on browser / inspect it while running on android using chrome inspect, you should be able to go to the network tab and get details on the “http get” that you issued.

You can also compare the results of both your requests and possibly find out whats going wrong.

3

Okay, also, please note the error message that you have attached.

http://localhost:8100/api.openweathermap.org/data/2.5/weather?q=London&appid=7981ddbe4d2dfb962eec709fd94b654

The URL is wrong. see “localhost:8100”. Try calling:

this.http.get('http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=7981ddbe4d2dfb962eec709fd94b654c')

4

Hi Everyone

i am also facing same issue. URL is wrong in my case as well. it is going to following adderess -

localhost:8100/api.openweathermap.org/data/2.5/weather?q=london,uk&appid=a65d1067fb6d51ee336bd94e634972e9

Instead of going to HTTP it is going to local host. As per suggestion from Rohin when i added http:// before still local address is in picture.

“Http failure response for https://localhost:8100/api.openweathermap.org/data/2.5/weather?q=london,uk&appid=a65d1067fb6d51ee336bd94e634972e9: 404 Not Found”

Below is my current code for provider:

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}

@Injectable()
export class WeatherProvider {
  apikey ='a65d1067fb6d51ee336bd94e634972e9';
  url;

  constructor(public http: HttpClient) {
    console.log('Hello WeatherProvider Provider');
    this.url = 'https://api.openweathermap.org/data/2.5/weather?q=';
  }
getweather(city, country){
return this.http.get(this.url+city+','+country+'&appid='+this.apikey)

}
}