Handling API http return errors on JQuery

Question

I have this html page:

$(document).ready(function() {

  $.ajax({
    url: "https://api.github.com/users/Microsoft/",
    type: 'GET',
    dataType: 'json',
    success: function(res) {
      $('#result').text(JSON.stringify(res, null, '\n'));
    }.error: function(jqXHR, error, errorThrown) {
      if (jqXHR.status && jqXHR.status == 400) {
        alert(jqXHR.responseText);
      } else {
        alert("Something went wrong");
      }
    }
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <pre id="result" style="color:red"></pre>
</div>

If Take away this:

.error: function(jqXHR,error, errorThrown) {  
           if(jqXHR.status&&jqXHR.status==400){
               alert(jqXHR.responseText); 
           }else{
               alert("Something went wrong");
           }

The result is shown properly, right now, it doesn't show anything. Just a blank page.

What I want, is to handle some http error that could happen if the API response isn't successful.

Any ideas?

You made a typo. `key: value` pairs in object literals are separated by commas (`,`) not periods (`.`). You put a period between success and error. Voting to close due to typo) — Quentin, Dec 16 '18 at 21:41
Created a snippet. Ran the snippet. Error immediately visible. Press F12 in your page and you will see it there too — mplungjan, Dec 16 '18 at 21:42
_This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. This can often be avoided by identifying and closely inspecting the shortest program necessary to reproduce the problem before posting._ — mplungjan, Dec 16 '18 at 21:43
Even after fixing the error mentioned by @Quentin, nothing will show because you haven't told it to show anything. If you get an error, all you're doing is `alert`ing, so nothing goes into `#result`... — Heretic Monkey, Dec 16 '18 at 21:43
And after that, if you do not alert but instead do a `console.log("Something went wrong",jqXHR.status);` you will see you get a 404 — mplungjan, Dec 16 '18 at 21:46

score -1 · Accepted Answer · answered Dec 16 '18 at 21:47

-1

Typo where you define error method:

$(document).ready(function() {

  $.ajax({
    url: "https://api.github.com/users/Microsoft/",
    type: 'GET',
    dataType: 'json',
    success: function(res) {
      $('#result').text(JSON.stringify(res, null, '\n'));
    },
    error: function(jqXHR, error, errorThrown) {
      if (jqXHR.status && jqXHR.status == 400) {
        alert(jqXHR.responseText);
      } else {
        alert("Something went wrong");
      }
    }
  });

})

answered Dec 16 '18 at 21:47

Vadim

515
1
4
9

1

Simple typos shouldn't be answered. There is a close vote reason for them. The comments already identify the typo and several others have already added their vote to close the question – charlietfl Dec 16 '18 at 21:51
2

Upvotes on an answer to typo question also prevents the OP from simply deleting the question, which they should do because the question has no long term value – Quentin Dec 16 '18 at 21:55

Handling API http return errors on JQuery

1 Answers1