How to use Weather api in Angular? [duplicate]No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST APIGetting data from metaweather API to angularjs pageHow to add CORS request in header in Angular 5How to validate an email address in JavaScript?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?How to replace all occurrences of a string in JavaScriptHow to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?
Are there any examples of a variable being normally distributed that is *not* due to the Central Limit Theorem?
How did the Super Star Destroyer Executor get destroyed exactly?
How to prevent "they're falling in love" trope
How much of data wrangling is a data scientist's job?
Solving a recurrence relation (poker chips)
Detention in 1997
What does the expression "A Mann!" means
What do you call someone who asks many questions?
How dangerous is XSS?
What is the most common color to indicate the input-field is disabled?
Why was the shrinking from 8″ made only to 5.25″ and not smaller (4″ or less)?
Why didn't Miles's spider sense work before?
How badly should I try to prevent a user from XSSing themselves?
Forgetting the musical notes while performing in concert
Why are the 737's rear doors unusable in a water landing?
Reverse dictionary where values are lists
Is there a hemisphere-neutral way of specifying a season?
Can a virus destroy the BIOS of a modern computer?
One verb to replace 'be a member of' a club
Why doesn't using multiple commands with a || or && conditional work?
Mathematica command that allows it to read my intentions
Can compressed videos be decoded back to their uncompresed original format?
How writing a dominant 7 sus4 chord in RNA ( Vsus7 chord in the 1st inversion)
Avoiding direct proof while writing proof by induction
How to use Weather api in Angular? [duplicate]
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST APIGetting data from metaweather API to angularjs pageHow to add CORS request in header in Angular 5How to validate an email address in JavaScript?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?How to replace all occurrences of a string in JavaScriptHow to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?
This question already has an answer here:
Getting data from metaweather API to angularjs page
1 answer
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
6 answers
I am trying to use Weather Api in angular application.
Api work fine, example: weather for london: https://www.metaweather.com/api/location/search/?query=lon
I saw that there is not some api keys or hash code and so on. My code does not fetch the result.
Service:
private citiesUrl = "https://www.metaweather.com/api/location/search/?query=lon"
getCities(): Observable<City[]>
return this.http.get<City[]>(this.citiesUrl).pipe(
tap(_ => this.log("fetched cities")),
catchError(this.handleError<City[]>("getCities", []))
)
WeatherComponent in which response should be displayed:
ngOnInit()
console.log("cities" + this.cities)
this.getCities()
getCities(): void
this.weatherService.getCities().subscribe((cities) =>
this.cities = cities
)
Problem is maybe in converting json to object?
I'm getting this error in my console:
Access to XMLHttpRequest at 'https://www.metaweather.com/api/location/search/?query=lon' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
weather.service.ts:61 HttpErrorResponse headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://www.metaweather.com/api/location/search/?query=lon", ok: false, …
(anonymous) @ weather.service.ts:61
javascript
marked as duplicate by sideshowbarker
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 22 at 1:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 3 more comments
This question already has an answer here:
Getting data from metaweather API to angularjs page
1 answer
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
6 answers
I am trying to use Weather Api in angular application.
Api work fine, example: weather for london: https://www.metaweather.com/api/location/search/?query=lon
I saw that there is not some api keys or hash code and so on. My code does not fetch the result.
Service:
private citiesUrl = "https://www.metaweather.com/api/location/search/?query=lon"
getCities(): Observable<City[]>
return this.http.get<City[]>(this.citiesUrl).pipe(
tap(_ => this.log("fetched cities")),
catchError(this.handleError<City[]>("getCities", []))
)
WeatherComponent in which response should be displayed:
ngOnInit()
console.log("cities" + this.cities)
this.getCities()
getCities(): void
this.weatherService.getCities().subscribe((cities) =>
this.cities = cities
)
Problem is maybe in converting json to object?
I'm getting this error in my console:
Access to XMLHttpRequest at 'https://www.metaweather.com/api/location/search/?query=lon' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
weather.service.ts:61 HttpErrorResponse headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://www.metaweather.com/api/location/search/?query=lon", ok: false, …
(anonymous) @ weather.service.ts:61
javascript
marked as duplicate by sideshowbarker
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 22 at 1:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Have you try seeing if the code is really executed through the network tab of the developper tools in your browser?
– Kevin Pastor
Mar 21 at 21:22
the problem is that you only has the "cities" after an async call is finished. (the console.log(this.cities) is make before the call finished (put the instruction INSIDE the subscribe function)
– Eliseo
Mar 21 at 21:24
I updtaed the post with error, problem is in CORS.
– Mark James
Mar 21 at 21:24
How to avoid cors issure in angular?
– Mark James
Mar 21 at 21:29
stackoverflow.com/questions/47345282/…
– Jonathan Stellwag
Mar 21 at 21:33
|
show 3 more comments
This question already has an answer here:
Getting data from metaweather API to angularjs page
1 answer
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
6 answers
I am trying to use Weather Api in angular application.
Api work fine, example: weather for london: https://www.metaweather.com/api/location/search/?query=lon
I saw that there is not some api keys or hash code and so on. My code does not fetch the result.
Service:
private citiesUrl = "https://www.metaweather.com/api/location/search/?query=lon"
getCities(): Observable<City[]>
return this.http.get<City[]>(this.citiesUrl).pipe(
tap(_ => this.log("fetched cities")),
catchError(this.handleError<City[]>("getCities", []))
)
WeatherComponent in which response should be displayed:
ngOnInit()
console.log("cities" + this.cities)
this.getCities()
getCities(): void
this.weatherService.getCities().subscribe((cities) =>
this.cities = cities
)
Problem is maybe in converting json to object?
I'm getting this error in my console:
Access to XMLHttpRequest at 'https://www.metaweather.com/api/location/search/?query=lon' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
weather.service.ts:61 HttpErrorResponse headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://www.metaweather.com/api/location/search/?query=lon", ok: false, …
(anonymous) @ weather.service.ts:61
javascript
This question already has an answer here:
Getting data from metaweather API to angularjs page
1 answer
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
6 answers
I am trying to use Weather Api in angular application.
Api work fine, example: weather for london: https://www.metaweather.com/api/location/search/?query=lon
I saw that there is not some api keys or hash code and so on. My code does not fetch the result.
Service:
private citiesUrl = "https://www.metaweather.com/api/location/search/?query=lon"
getCities(): Observable<City[]>
return this.http.get<City[]>(this.citiesUrl).pipe(
tap(_ => this.log("fetched cities")),
catchError(this.handleError<City[]>("getCities", []))
)
WeatherComponent in which response should be displayed:
ngOnInit()
console.log("cities" + this.cities)
this.getCities()
getCities(): void
this.weatherService.getCities().subscribe((cities) =>
this.cities = cities
)
Problem is maybe in converting json to object?
I'm getting this error in my console:
Access to XMLHttpRequest at 'https://www.metaweather.com/api/location/search/?query=lon' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
weather.service.ts:61 HttpErrorResponse headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://www.metaweather.com/api/location/search/?query=lon", ok: false, …
(anonymous) @ weather.service.ts:61
This question already has an answer here:
Getting data from metaweather API to angularjs page
1 answer
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
6 answers
javascript
javascript
edited Mar 21 at 21:29
Amy
22k1876133
22k1876133
asked Mar 21 at 21:16
Mark JamesMark James
217
217
marked as duplicate by sideshowbarker
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 22 at 1:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by sideshowbarker
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 22 at 1:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Have you try seeing if the code is really executed through the network tab of the developper tools in your browser?
– Kevin Pastor
Mar 21 at 21:22
the problem is that you only has the "cities" after an async call is finished. (the console.log(this.cities) is make before the call finished (put the instruction INSIDE the subscribe function)
– Eliseo
Mar 21 at 21:24
I updtaed the post with error, problem is in CORS.
– Mark James
Mar 21 at 21:24
How to avoid cors issure in angular?
– Mark James
Mar 21 at 21:29
stackoverflow.com/questions/47345282/…
– Jonathan Stellwag
Mar 21 at 21:33
|
show 3 more comments
Have you try seeing if the code is really executed through the network tab of the developper tools in your browser?
– Kevin Pastor
Mar 21 at 21:22
the problem is that you only has the "cities" after an async call is finished. (the console.log(this.cities) is make before the call finished (put the instruction INSIDE the subscribe function)
– Eliseo
Mar 21 at 21:24
I updtaed the post with error, problem is in CORS.
– Mark James
Mar 21 at 21:24
How to avoid cors issure in angular?
– Mark James
Mar 21 at 21:29
stackoverflow.com/questions/47345282/…
– Jonathan Stellwag
Mar 21 at 21:33
Have you try seeing if the code is really executed through the network tab of the developper tools in your browser?
– Kevin Pastor
Mar 21 at 21:22
Have you try seeing if the code is really executed through the network tab of the developper tools in your browser?
– Kevin Pastor
Mar 21 at 21:22
the problem is that you only has the "cities" after an async call is finished. (the console.log(this.cities) is make before the call finished (put the instruction INSIDE the subscribe function)
– Eliseo
Mar 21 at 21:24
the problem is that you only has the "cities" after an async call is finished. (the console.log(this.cities) is make before the call finished (put the instruction INSIDE the subscribe function)
– Eliseo
Mar 21 at 21:24
I updtaed the post with error, problem is in CORS.
– Mark James
Mar 21 at 21:24
I updtaed the post with error, problem is in CORS.
– Mark James
Mar 21 at 21:24
How to avoid cors issure in angular?
– Mark James
Mar 21 at 21:29
How to avoid cors issure in angular?
– Mark James
Mar 21 at 21:29
stackoverflow.com/questions/47345282/…
– Jonathan Stellwag
Mar 21 at 21:33
stackoverflow.com/questions/47345282/…
– Jonathan Stellwag
Mar 21 at 21:33
|
show 3 more comments
0
active
oldest
votes
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Have you try seeing if the code is really executed through the network tab of the developper tools in your browser?
– Kevin Pastor
Mar 21 at 21:22
the problem is that you only has the "cities" after an async call is finished. (the console.log(this.cities) is make before the call finished (put the instruction INSIDE the subscribe function)
– Eliseo
Mar 21 at 21:24
I updtaed the post with error, problem is in CORS.
– Mark James
Mar 21 at 21:24
How to avoid cors issure in angular?
– Mark James
Mar 21 at 21:29
stackoverflow.com/questions/47345282/…
– Jonathan Stellwag
Mar 21 at 21:33