Help getting fetch to work with wind-bow API

#1

Can I get a hand with this? 404 and cors error.


 fetch(`https://wind-
bow.gomix.me/twitch-api/users/freecodecamp`,{
headers: new Headers({
    'Content-Type': 'application/json'
  })
    })
    .then(blob => blob.json ())
    .then(data => console.log(data))

the url DOES work in browser and with curl -H "Content-type:application/json" https://wind-bow.glitch.me/twitch-api/users/freecodecamp

Javascript Fetch for TwitchTV viewer
#2

I broke your post off into its own thread.

You don’t need the Content-type header for a GET request. It doesn’t hurt, but the server isn’t paying attention to this.

Do you have your project in a CodePen that you can share? It’s not obvious from the given code why this wouldn’t work.

#3

Thanks for breaking it out.

I have a pen working with the real api, using fetch, but I want to put this in instead, but I can’t even get it to make the basic call as above. I broke it out of the pen for this reason. Isn’t this the most basic form of fetch?

If it’s essential I’ll build it into a pen, but it won’t work there until I can get it work on it’s own.

#4

I’m not entirely sure what you mean here. Is this code from a project that’s available on CodePen, or are you developing locally? I’d like to be able to debug your code in CodePen, but if you are able to share your project’s repository, that would be sufficient as well.

You are using fetch correctly. As I said, the header is unnecessary, but should be harmless.

#5

My code has an api key in it that I don’t want to put up on codepen. I wanted to replace that one with this version of the api. When I pulled out the ajax function it didn’t work. I broke it down to the most basic components, above, and it still didn’t work. I tested the endpoint with a real user in curl, and it did work though.

I guess I get that U want to help me debug my project, but I am literally not able to get the wind-bow to return a response.

Below does work, and this what I wanted to change up kraken for wind-bow. Not that it means much, but maybe this will help you understand what I am trying to do, and why (to get rid of the need for the api key)

function makeAjax(url, arr, callback){
  let results = [];
  arr.forEach((i) => {
    let myHeaders = new Headers();
    myHeaders.append('Client-ID','19999999999999999-xxxxxxxxxxxx')
    let options = {
      method: 'GET',
      headers: myHeaders,
    }
    fetch(`${url}/${i}`,options)
    .then(blob => blob.json ())
    .then((data) => { results.push(data)})

  })
  // returns an array
  setTimeout(function(){
    callback(results)
  },1000)
}

makeAjax(`https://api.twitch.tv/kraken/channels/`, users,(res) => { console.log(res)})
#6

Totally understandable. Your post gave me enough to work with, though the issue was much easier than I thought, and it was actually obvious from your first post. I should have caught it right away, but I’m having a serious “off day”.

So, the API has been moved. You’re trying to use the old gomix.me API. The current URL is https://wind-bow.glitch.me/. I tried your code with the updated URL and it worked fine. That’s it. I found this by going to the Network tab of my dev console and looking at the AJAX request. It was showing a 301 code and giving the updated location in the headers.

34 PM
34 PM704Ă—570 77.1 KB

I do see another issue with your code. You should never ever ever use setTimeout to wait for an asynchronous operation. It’s much better to do your DOM manipulation in the then method where you’re currently pushing to your array. You could just move your callback to that then method.

function makeAjax(url, arr, callback){
  arr.forEach((i) => {
    fetch(`${url}/${i}`)
    .then(blob => blob.json ())
    .then(callback)
  });

makeAjax(`https://api.twitch.tv/kraken/channels/`, users,(user) => console.log(user));

If you really wanted all of your users in an array, there’s a better way to do that but it would mean rewriting almost all of your makeAjax function. Getting rid of your setTimeout call will make your app run faster, be more robust, and it will look better if any potential employers take a look at your project.

2 Likes
#7

Thanks for pointing that out! I know it must be hard for all the staff at FCC to keep all the documentation up to date. Hopefully someone can put up that new URL on the wind-bow page. The old one is still there.

My fetch does not work as I had it written, and to get it to work I had to remove the headers. But now it does work!

The setTimeout was a hackey way to do it and thanks for showing me a better way as well.

1 Like
Use the Twitchtv JSON API with fetch() problems
#8

Wow! thank you so much for pointing this out. I was going crazy! Now I only have to update my app.
Thanks!

#9