JS: How to handle a 400 Bad Request error returned from API url

Question

Still quite inexperienced and I'm trying to error handle a "400 Bad Request".

I have a site with a search bar.
The value entered into the search bar is then placed into an api url that returns an object.
Whenever a misspelled search value is entered, the site's console returns a "400 Bad Request" for the api url.
I also receive the error object below from the api url request.

{
    "meta": {
        "code": 400,
        "errorType": "failed_geocode",
        "errorDetail": "Couldn't geocode param near: Jljjl",
        "requestId": "59208ac96a6071641949481d"
    },
    "response": {}
}

What I want to do is use a conditional statement like below to handle this error:

try {
    if (400 Bad Request) throw "incorrect";
} catch (err) {
    document.getElementById('results').innerHTML = "Input is " + err;
}

I've tried conditional statements like the one's below but it seems like I am unable to access any of the values in the error object that is returned:

if (object.meta.code === 400)
if (object.meta.code !== 200)
if (object === undefined) // or null or 0

How can I put the 400 Bad Request error into the "if statement", or is there another way to handle these errors?
Thanks

Are you getting back JSON? You may need to parse the response, for example JSON.parse(object) before you can work with it as a JavaScript object. — Adam Recvlohe
– Adam Recvlohe, Commented May 27, 2017 at 23:30
When you say "getting back JSON", could you elaborate? I'm only receiving the below object when there is an input value error, Thx much: {"meta":{"code":400,"errorType":"failed_geocode","errorDetail":"Couldn't geocode param near: Jljjl","requestId":"59208ac96a6071641949481d"},"response":{}} — TheBiscuit
– TheBiscuit, Commented May 27, 2017 at 23:51
The response might be in a string like " {"meta":{"code":400,"errorType":"failed_geocode","errorDetai‌l":"Couldn't geocode param near: Jljjl","requestId":"59208ac96a6071641949481d"},"response":{}‌}". If you parse it with JSON.parse(errorObject) what do you get? — Adam Recvlohe
– Adam Recvlohe, Commented May 28, 2017 at 0:02
I believe the response is not a string. I'm getting an "unexpected token" syntax error when using JSON.parse with the error object. Here is the actual api url that is returning the example error object, if you'd like to view it: api.foursquare.com/v2/venues/… — TheBiscuit
– TheBiscuit, Commented May 28, 2017 at 0:27
I see, it looks like that is coming from the body of the response. Are you able to do result.body.meta.code and get the information? — Adam Recvlohe
– Adam Recvlohe, Commented May 28, 2017 at 0:30

m1kael · Accepted Answer · 2017-05-28 00:44:12Z

4

Using Fetch API, this could be achieved with the following:

fetch(url)
    .then((res) => {
        if (res.status === 400) {
            throw new Error('your error message here');
        }
        return res.json();
    })
    .then(json => {
        // handle response normally here
    })
    .catch(ex => {
        // handle errors here
    });

answered May 28, 2017 at 0:44

m1kael

2,8511 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheBiscuit Over a year ago

Thanks very much for your help with this, I got everything to work.

Adam Recvlohe · Accepted Answer · 2017-05-28 01:04:55Z

3

Just to piggy back off of m1kael this is what I have

window.fetch('https://api.foursquare.com/v2/venues/explore?v=20170324&near=Jljjl&query=study%20spot&limit=10&intent=browse&radius=100000&venuePhotos=1&client_id=XPQI2RJB3NMDT2JYQIMWDMGZSKRDQZX40NYIOKK02DXB1CVE&client_secret=UNHLLMUWXTEI3USTTN5DRJ02QDWQMHZQ5B22CFX0EY4JLEHO')
.then(r => r.json())
.then(r => {
  if (r.meta.code === 400) {
    console.error('Error')
  } else {
    console.log(r)
  }
})

answered May 28, 2017 at 1:04

Adam Recvlohe

3331 silver badge11 bronze badges

4 Comments

TheBiscuit Over a year ago

Thanks. I see I was parsing incorrectly, first time trying it. In my site I'm getting the API object using the "$.getJSON" function. So since your last response I've been trying to figure out how to JSON parse my object named "data" within the $.getJSON function.

Adam Recvlohe Over a year ago

Looks like $.getJSON does not allow you to handle errors like a 400 response. Looks like you have to use $.ajax. Here is a code pen: codepen.io/arecvlohe/pen/mmYrqq?editors=1011

Adam Recvlohe Over a year ago

Inside of the error callback is where you would handle use your conditional logic.

TheBiscuit Over a year ago

Thanks. I used your answer using fetch and I got it to work with the rest of my code, I've just been studying it a bit. I'm going to study your $.ajax response as well. Thanks for your help. Been working at this problem on my own in my spare time for about a WEEK! Thanks again!

Collectives™ on Stack Overflow

JS: How to handle a 400 Bad Request error returned from API url

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related