Endpoint strings saved in rails postgresql db and cannot make fetch() calls with them in js frontend

Question

I have a rails application with javascript in in the asset pipeline. The rails db has saved urls and I am trying to make fetch() calls with these urls/endpoints to the JSON api. If I put the url in the browser address bar and remove the quotation marks ("") the endpoint will return the data. I can see in the console the error that the url does not exist. I am working on localhost:3000 and that appears to be appended to every fetch call as you can see here. This will appear in the console with a 404 error.

http://localhost:3000/api.openweathermap.org/data/2.5/weather?q=Seattle,us&APPID=fe2a775f427aa5fc92ce0379937b9ee9

. Any suggestions on how to get these fetch() calls working?

How can I implement this?

So far my application will work until I hit the fetch calls that are made and then return undefined

const BASE_URL = "http://localhost:3000/cities.json" 
function getCityData(){  
    fetch(BASE_URL).then( res => res.json() ).then(function(json){ 
           //cityArray will be an Array of cities 
           //formatted in a way the api can use
           let cityArray = json.map(obj => obj.name);  
           //cityObjArray will be an array of City objects created 
           // by the class City with city name and api endpoint attributes 
           const cityObjArray = cityArray.map( city => new City(city)); 
           //fetchArray pulls out all the api endpoints from the object
           const fetchArray = cityObjArray.map( cityObj => cityObj.fetchURL);  
           debugger
            let data = fetchArray.map(function(url){   
            // this will work until it hits this point 
            // at this point javaScript will attempt to sanitize the endpoints 
            //and make fetch(url) with them  
            //I will get 404 not found and it will show the endpoint as 
            //starting with localhost:3000 which is were I am running this
                let rawUrl = url.replace(/['"]+/g, ''); 
                debugger
                 fetch(rawUrl).then( res => res.json() ) 
                .then(function(json){
                    debugger
                })
           .catch(function(){
                console.log("ERROR")
            });  
        });
    }) 
}


class City {
    constructor(name){
        this.name = name 
        this.fetchURL = `api.openweathermap.org/data/2.5/weather?q=${name},us&APPID=fe2a775f427aa5fc92ce0379937b9ee9`
    }  

} 


class Adaptor {
    constructor(url){
        this.url = url 
        this.data = fetch(url).then( res => res.json())
    }  

}```


  [1]: https://i.stack.imgur.com/vCS0o.png

It looks to me like your URLs need to start with a protocol, `http://`, `https://` or '//' (relative protocol). Otherwise the `fetch()` interprets them as relative paths at the current host (`localhost:3000` in your example). Try this.fetchURL = `https://api.openweathermap.org/data/2.5/weather?q=${name},us&APPID=fe2a775f427aa5fc92ce0379937b9ee9` — Wizard of Ogz, Mar 16 '20 at 09:31
Yep. That did it. It is obfuscated when you type the API endpoint in the address bar. Under the hood you are using http:// for every call. With that explicitly being added the fetch() request works properly! I find it interesting rails added localhost:3000 to the url address when it makes the fetch() request!!! — swordfish, Mar 17 '20 at 07:06
Great! I moved my comment to an answer since that is where it belongs. — Wizard of Ogz, Mar 17 '20 at 14:47

Wizard of Ogz · Answer 1 · 2020-03-17T14:47:16.343

your URLs need to start with a protocol, http://, https:// or // (relative protocol). Otherwise the fetch() interprets them as relative paths at the current host (localhost:3000 in your example). Try this:

this.fetchURL = https://api.openweathermap.org/data/2.5/weather?q=${name},us&APPID=fe2a775f427aa5fc92ce0379937b9ee9

It is not Rails that was adding localhost:3000 to your paths. Since you omitted the protocol it is assumed by fetch() that you have given it a path relative to the current URL. Here is a more detailed answer about relative paths https://stackoverflow.com/a/36369553/632688.

Endpoint strings saved in rails postgresql db and cannot make fetch() calls with them in js frontend

1 Answers1