No error being displayed with GET request

Question

I am trying to display the results of this get request but it is not returning any results or errors.

Even when testing I have tried to hardcode and append <li>my job</li> but that doesn't work either.

Have you got any ideas?

Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function (){

  var $jobs = $('#jobs');

  $.ajax({
    type: 'GET',
    dataType: 'json',
    username: '5afe0f90-3480-4d47-8206-3529815a610a',
    password: '',
    crossDomain: true,
    url: 'http://www.reed.co.uk/api/1.0/search?keywords=construction&location=sheffield',
    success: function(jobs) {
      $.each(jobs, function(i, job){
        $jobs.append('<li>my job</li>')
      });
    }
  });

});
</script>

<ul id="jobs"></ul>

@leafeve what would the error call back be? sorry I am new to this. — Alex Posterns, Oct 03 '19 at 16:52
You only have a success callback; you need to add an error callback. — Josh Mein, Oct 03 '19 at 16:53
add error callback and check agian https://www.tutorialsteacher.com/jquery/jquery-ajax-method — leafeve, Oct 03 '19 at 16:57
Have you checked the response in the Network tab of your browser's dev tools? What does the response look like? Is it valid JSON? — Moob, Oct 03 '19 at 17:13

Noah · Answer 1 · 2019-10-03T17:09:15.300

Everything looks to be good except the success callback. You have two options, take a look below to see what suites your needs better.

Option 1: Use an arrow function expression

$(function (){
    var $jobs = $('#jobs');

    $.ajax({
        type: 'GET',
        dataType: 'json',
        username: '5afe0f90-3480-4d47-8206-3529815a610a',
        password: '',
        crossDomain: true,
        url: 'http://www.reed.co.uk/api/1.0/search?keywords=construction&location=sheffield',
        success: (jobs) => {
            $.each(jobs, function(i, job){
                $jobs.append('<li>my job</li>')
            });
        }
    });
});

Option 2: Move either the definition of $jobs into the same context in the callback or eliminate it.

$(function (){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        username: '5afe0f90-3480-4d47-8206-3529815a610a',
        password: '',
        crossDomain: true,
        url: 'http://www.reed.co.uk/api/1.0/search?keywords=construction&location=sheffield',
        success: function(jobs) {
            $.each(jobs, function(i, job){
                $('#jobs').append('<li>my job</li>')
            });
        }
    });
});

Explanation: This is caused by the context being different for where the variables are defined. With the function definition it will use it own context, with the arrow function it will use the current context.

If you are still having an issue check the Console to see if any errors are being produced by a Server Response Code, CORS, Mixed Content, etc.

Hi Noah, I have tried both of your solutions but nothing is showing on the page. I change the dataType to JSONP to get around the CORS issue. Have you tried the script? — Alex Posterns, Oct 04 '19 at 09:34

score 0 · Accepted Answer · answered Oct 03 '19 at 17:10

You need an error callback in the options object:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function (){

  var $jobs = $('#jobs');

  $.ajax({
    type: 'GET',
    dataType: 'json',
    username: '5afe0f90-3480-4d47-8206-3529815a610a',
    password: '',
    crossDomain: true,
    url: 'http://www.reed.co.uk/api/1.0/search?keywords=construction&location=sheffield',
    success: function(jobs) {
      $.each(jobs, function(i, job){
        $jobs.append('<li>my job</li>')
      });
    },
    error: (err)=> {alert(err)}
  });

});
</script>

<ul id="jobs"></ul>

There are four returned statuses, in addition to success:

timeout - when your specified timeout is exceeded
error - http error, like 404
notmodified - when requested resource was not modified since last request
parsererror - when an xml/json response is bad

So, you may want to check each of those out to determine the best way to handle each response. :)

No error being displayed with GET request

2 Answers2