Search code examples
javascriptjsonajaxhtmlractivejs

How to fix the OpenWheather API's opaque response in RactiveJs with HTML5 Fetch API


This is the first time we're dirtifying our hands with Fetch HTML5 API and Ractive JS.

We've this code here which is not throwing any error.

Notice the no-cors header set as the request parameter.

We just need to get the free API data from the Open Weather Map guys.

How to fix that opaque response in RactiveJs with HTML5 Fetch API


Solution

  • Your code needs to correct the following errors

    1. use api.openweathermaps.org not sample.openweathermaps.org
    2. use GET not POST
    3. use a VALID api key (yes, you can get a free key)
    4. use fetch correctly

    fetch('http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=**valid api key**', {
        method: 'GET',
        redirect: 'follow'
    })
    .then(response => response.json())
    .then(data => console.dir(data));