JSON parse not working properly - Javascript

Question

I am having a little trouble with parsing the data. When i add JSON.parse(this.responseText) and this.status == 200 on the if statement my code seem to not work. When I take them off it works and I get the alert that it's a success. Not sure what I am doing wrong or maybe I am doing it completely wrong lol any help will be greatly appreciated! I am using Yelp API.

Here is my code:

    xhr.withCredentials = true;
    
    xhr.onreadystatechange = function() {
      if(this.readyState == 4) {
        console.log(this.responseText);
        //let data = JSON.parse(this.responseText);
        alert("Success!");
        //display(data);
      }
    };
    
    xhr.open("GET", "https://api.yelp.com/v3/businesses/search?term=" + resname.value + "&location=" + locationname.value+"&limit=5");
    xhr.setRequestHeader("Authorization", "Bearer <MY API KEY WILL BE HERE>");
    xhr.send();

error when I parse:

Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.xhr.onreadystatechange

This is the error I get: index.html:1 Access to XMLHttpRequest at 'api.yelp.com/v3/businesses/search?location=NYC' from origin '127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. api.yelp.com/v3/businesses/search?location=NYC:1 I get the success alert when i take off the json.parse( this is the error when i add JSON.parse Unexpected end of JSON input at JSON.parse (<anonymous>) at XMLHttpRequest.xhr.onreadystatechange — lxx2015
– lxx2015, Commented Dec 9, 2020 at 5:02

SidPro · Accepted Answer · 2020-12-09 06:21:34Z

Fusion API appears to have been developed with the intention for back-end use as there is no current "approved" method of using Fusion via JavaScript. Accordingly, Ajax requests from the front-end result in CORS (Cross Origin Resource Sharing violation) issues, as neither CORS headers nor the JSONP workarounds are supported by Fusion (at least not at the time of this writing).here

How do I resolve the CORS error in Yelp API call? same as yours error

EDIT: try this it work:

var queryURL = https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=food&location=New York City&limit=5;
var mykey = "";

        $.ajax({
            url: queryURL,
            method: "GET",
            headers: {
                "accept": "application/json",
                "x-requested-with": "xmlhttprequest",
                "Access-Control-Allow-Origin":"*",
                "Authorization": `Bearer ${mykey}`
             },
            success: function(result){
                console.log(result);
            }
         });

I see. I tried running the API on postman and it worked there. I will try the link you provided. Thank you!
@lxx2015 if it help to solve your problem than please don't forgot to Up vote.

Collectives™ on Stack Overflow

JSON parse not working properly - Javascript

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related