Javascript fetch api help

1 
window.addEventListener("load",() => {
    getAPI();

    async function getAPI() {
       
        const key="Bearer%20eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiIsImtpZCI6IjI4YTMxOGY3LTAwMDAtYTFlYi03ZmExLTJjNzQzM2M2Y2NhNSJ9.eyJpc3MiOiJzdXBlcmNlbGwiLCJhdWQiOiJzdXBlcmNlbGw6Z2FtZWFwaSIsImp0aSI6IjRlZmFiMTY0LWYzMzEtNGQ4Yi1iZjIwLWYwYzhiYmM3Y2M3MCIsImlhdCI6MTU5NDk3NDQ3OSwic3ViIjoiZGV2ZWxvcGVyL2M1ZmQwNjdmLWZkMjMtN2NkNy0zNDM1LTBlN2ZmOTc4ODY4NyIsInNjb3BlcyI6WyJjbGFzaCJdLCJsaW1pdHMiOlt7InRpZXIiOiJkZXZlbG9wZXIvc2lsdmVyIiwidHlwZSI6InRocm90dGxpbmcifSx7ImNpZHJzIjpbIjEwNi4yMjMuMTgxLjY0Il0sInR5cGUiOiJjbGllbnQifV19.MQ8ZAygMyD4jy7rTzCyUQ9EMP2WdQF07fwVCofytKxliEFxGdRwdKLb0fVFtSnkVEv7bmvwV2NteCFD0UCxuGQ";

        const response = await fetch(`https://api.clashofclans.com/v1/players/%23P9YJ88LUP?authorization=${key}`,{
            method: 'GET',
            Accept: 'application/json',
            mode: "no-cors"
        });
        console.log(response)
        const data = await response.json();
        console.log(data)
    }
})

Hii, I want to fetch clash of clan player data but after executing this code I got some stupid error I could not figure out what is the cause. please help me.

ERRORS: “brain.js:14 Uncaught (in promise) SyntaxError: Unexpected end of input
at getAPI (brain.js:14)”

2

You aren’t returning anything firm the function

3

If i past this key into my browser window It return my data but in fetch function It don’t can you tell my what’s problem in my funciton.

4

Your function is not returning anything. console.log just logs to the console, it doesn’t do anything else. You aren’t returning the data, you’re just printing it in the console – console.log is just a function to help you debug problems. You need to actually return the data you get from the API, this is how functions work in JS.

For example, example1 returns a value, example2 does not:

function example1 (x) {
  return x;
}

function example2 (x) {
  console.log(x);
}
5

But I want to console log my output if I use different endpoint like: “weather api , quote api , joke api” in fetch function it works fine, (response.json() ) return a json object but in that case It does not return anything it gives me an error.

6

It is a function, you aren’t returning anything from the function. Functions in JavaScript use the return keyword to return values, otherwise the function doesn’t return a value.

This is an example of a function that returns a value:

function sayHello() {
  return "Hello!";
}

This is an example of a function that does not:

function dontSayHello() {
}

You can console.log as much as you want, but all that does is print values to the console. It is there for debugging purposes, to help you fix issues, it doesn’t do anything except print values to the console.

7 
window.addEventListener("load", () => {
    const endpoint = `https://sv443.net/jokeapi/v2/joke/Programming`;
    const Joke_input = document.querySelector(".joke");
    const btn = document.querySelector(".btn");

    

    async function ApiCall() {
        const res = await fetch(endpoint);
        const data = await res.json();
        // console.log(data)
        if(data.type === "single") {
            Joke_input.innerHTML = data.joke;
        }
        else {
            Joke_input.innerHTML = `<span style="color: #ff0077;">Setup</span>: ${data.setup} <br> <span style="color: #ff0077;">Delivery</span>: ${data.delivery}`;
        }
    }

    btn.addEventListener('click',() => {
        ApiCall();
    })
})

This code is pretty much same that I wrote in the problem statement here if I console log “data” variable It gives me a json data but in my problem statement it gives me a
this error.
"ERRORS: “brain.js:14 Uncaught (in promise) SyntaxError: Unexpected end of input
at getAPI (brain.js:14)”
So how I add this functionality me coc api code code.

8

Ok, that’s fine – the issue is still there on the first code you posted, everything I’ve said still applies. The JSON you’re getting from that API is invalid anyway, it can’t parse it.

9

So,If I run this URL in my browser and postman It return my desire result

Annotation 2020-07-17 175827
Annotation 2020-07-17 1758271737×887 74.4 KB
. How I can solve this problem I think the problem is the “mode: “no-cors”” cause If I remove this line It give me CORS error but it return me my json data.

Can you tell me how I solve CORS error It give me a serious headache.

10
  • if you specify “no-cors”, then you are saying it is a basic HTTP request, no special headers. The API has to be set up to deal with that, and it will work in situations where there is a public API designed to be accessed by anyone.
  • if you remove that, then you are saying that you can only get data if a. the request is to the same origin, ie everything’s on one server. This isn’t the case, so b. is that the server has been set up to serve cross-origjn requests. This is the case here, but you have to send some special tokens to confirm with the server that you’re allowed access.

I would advise reading the documentation for APIs carefully: in this case, you can’t make a request from the browser, it won’t work:

To use the API, a JSON Web Token is required and it needs to be passed as part of every request. The token is bound to rate limitations and specified IP addresses, so you will need a web server to fetch data from the API and host your application. The API enforces these restrictions and exceeding the limitations will cause API calls to fail.

(emphasis mine).

CORs only applies to requests in a browser, so you need to have a server, your server, make the requests and you can do what you want with it then. This is non-trivial if you don’t know how to do it and have never built a server, though it is very much worthwhile learning to build one