$.ajax function being skipped when trying to import JSON file

Question

1) This AJAX function gets skipped if I try to run in debug mode in Chrome 2) When I just run it normally, the AJAX works and I get arrays of length 64 outputted to console. However after the AJAX call, the same arrays become empty and the length becomes 0

I even tried using $(document).ready instead of $("#nextQ").click(function(){

$("#nextQ").click(function(){ 

var Quotes = [];
var ID = [];
var Tag = [];
var seen = [];
//Get quotes from JSON file
  $.ajax({
                url: '../facts.json',
                datatype: 'json',
                type: 'get',
                success: function(data){
                                 console.log(data);
                                    console.log("successfully imported the JSON file");
                                 console.log(data.length); //Used to return 64
                                 totalQ = data.length; 
                                 for (i = 0; i < totalQ; i++){
                                           ID[i] = data[i][0];
                                           Tag[i] = data[i][1];
                                           Quotes[i] = data[i][2];
                                           seen[i] = data[i][3];
                            }
                                console.log(Quotes.length);
                    }
        });


//-----------------------
//This is where it all breaks down..the following totalQ is empty 
//

var Quote = new String;
var qnumber = 0;
var totalQ //The total number of available quotes to choose from
var Qrem //Remaining unseen quotes
var lock = new Boolean; //This will be true if the quote is already seen
var CurrentImage = String;

totalQ = Quotes.length - 1; //This length is returning 0 and totalQ = -1
console.log("TotalQ = " + totalQ);
ChooseQuote(0,totalQ);

When you click whatever #nextQ is, the arrays are initialized to empty and the AJAX call is made. Since it is an AJAX call, you can't know when it is going to return and, you can't be guaranteed that the call will be successful. You should add an error callback and debug the call using the Network tab of the browser's development tools. — Scott Marcus, Mar 05 '16 at 17:56
I agree that it probably is not running the success property because it is failing but it was working last night which is why I am stumped. — Badrush, Mar 05 '16 at 17:58
Refer to https://api.jquery.com/jquery.get/#jQuery-get-settings for details on how to implement a fail callback. And use the developer tools to inspect the AJAX call - - errors can be found there. The fact that it ran last night and nothing was changed only points to a server/network/remote file problem. Remember AJAX is about calling external resources, so it's not just your code that you have to worry about. — Scott Marcus, Mar 05 '16 at 18:00

Darin Dimitrov · Answer 1 · 2016-03-05T18:00:11.937

0

Try replacing:

datatype: 'json',

with:

dataType: 'json',

And don't forget that javascript is a case-sensitive programming language. Also you can try adding an error handler to your AJAX call to see if it gets called for some reason. For example if the remote endpoint returns some invalid JSON that cannot be parsed you would get an error.

edited Mar 05 '16 at 18:00

answered Mar 05 '16 at 17:55

Darin Dimitrov

1,023,142
271
3,287
2,928

I will try it but I am skeptical because it worked last night without me changing that at all. – Badrush Mar 05 '16 at 17:56
The jQuery spec shows it as dataType. – Scott Marcus Mar 05 '16 at 17:58
Can you see the AJAX request being made in the Network tab? What does the server return as status code? Also you can try adding an `error` handler for your AJAX call to see if it gets called for some reason. For example if the remote endpoint returns some invalid JSON that cannot be parsed that's what you would get. You can try browsing this JSON directly in your browser by navigating to the corresponding url. Maybe something was changed in it and it is no longer available/valid? – Darin Dimitrov Mar 05 '16 at 17:58
It loads the JSON file but I still cant call the arrays later, their length is zero. – Badrush Mar 05 '16 at 18:03
Maybe the JSON file doesn't contain an array anymore but rather some javascript object. Showing this JSON here might help to narrow down the problem. – Darin Dimitrov Mar 05 '16 at 18:04
Okay so it seems like the AJAX fails when i try to debug it using a breakpoint and f10 in Chrome. But when I run it normally it works just fine and the console returns arrays of length 64. I updated my code to show what happens after but those arrays are empty, `TotalQ = Quote.length` should not return a length of 0 or -1 – Badrush Mar 05 '16 at 18:10
2

Ohhh, you seem to be misunderstanding what the first `A` in `AJAX` stands for :-) It stands for asynchronous, so trying to read the response from an asynchronous call **before** this call actually completed will obviously fail. I was just wondering myself why the hell did he declare some array variables outside of his `$.ajax` call. Now it's all clear. You declared them outside the `$.ajax` call and you tried to read their values just after this `$.ajax` call instead if declaring and using those variables **INSIDE** the success callback. – Darin Dimitrov Mar 05 '16 at 18:12
Sorry for wasting your time, I didn't know that. Assumed all code was Synchronous (I am self taught). Anyways I learned something. – Badrush Mar 05 '16 at 18:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105445/discussion-between-badrush-and-darin-dimitrov). – Badrush Mar 05 '16 at 18:15
@DarinDimitrov I looked at the Asynchronous guide and one of suggestions that made the most sense to me since I was using Jquery already is to do something like this: `ajax().done(function(result) {` can you tell me what I should write instead of `ajax().` in my example? – Badrush Mar 05 '16 at 18:21
1

You should write `$.ajax(...).done(...).fail(...)` as suggested in the guide you have read. And inside the `done` or `success` callback you should consume the results returned from the AJAX call. – Darin Dimitrov Mar 05 '16 at 21:58

$.ajax function being skipped when trying to import JSON file

1 Answers1