0

I have some nested for loops.

The 'm' loop doesn't seem to run - that is to say that the code contained within it doesn't execute.

The problem could be based around the fact that I'm using the length of an array that derives from a JSON array... but the code I use shows that the length of the array is a number - so should be fine!

I'm stumped. I have included console logs all the way to isolate the issue - it just seems that the 'm' loop doesn't fire...

    function stuff() {
    var obj = [];
    var textpasted = document.getElementById('textpasted').value;
    var vocabpasted = document.getElementById('vocabpasted').value;
    var newtextpasted = textpasted.split(" ");
    var newvocabpasted = vocabpasted.split(" ");
    var i,
    j,
    m,
    olength;

    for (i = 0; i < newvocabpasted.length; i++) {
        //search online for list of synoynyms of newvocabpasted[i]
        q1 = "https://words.bighugelabs.com/api/1/754ccc845dff7cb4459e3b40365609fb/",
        q2 = "/",
        q3 = "json";
        query = q1+newvocabpasted[i]+q2+q3;
        $.getJSON(query, function(data) {
            obj = data;
            olength = obj.length;
            console.log(obj);
            // check array lengths work - which they do!
            console.log("Search Length="+olength);// this displays in console as a number
            console.log("Text Length="+newtextpasted.length);
            console.log("Vocab Length="+newvocabpasted.length);
        });
        for (j = 0; j < newtextpasted.length; j++) {
            console.log("J loop works");
            // the loop below doesn't seem to run
            for (m = 0; m < olength; m++) {
                console.log("M loop works");// I don't see this
                console.log(obj[m]+"/"+newtextpasted[j]);// this doesn't run
                if (obj[m] === newtextpasted[j]) {
                    console.log("Match!");// I don't see this
                } else {
                    console.log("Checked!");// or this!
                }
            }
        }
    }

    //document.getElementById('result').innerHTML=newtextpasted;

}

The output in the console shows the result of everything correctly, apart from the 'm' loop.

stilts77
  • 191
  • 3
  • 14
  • 2
    `$.getJSON()` is an **asynchronous** operation. The call to `$.getJSON()` returns almost immediately, but the callback function is not invoked until much later, when the HTTP request completes. – Pointy Mar 01 '20 at 15:09
  • So.. by the time the array is returned, the loop has already been called? – stilts77 Mar 01 '20 at 15:20
  • 1
    Yes, exactly. Dealing with asynchronous operations is pretty much the core reality of JavaScript programming. – Pointy Mar 01 '20 at 15:25
  • So, the obvious (before I look it up myself) question is: can the code be delayed until the request is complete? – stilts77 Mar 01 '20 at 15:36
  • 1
    You can't make anything "wait" other than by dealing with callbacks or Promises. There are many resources available on the topic in general. – Pointy Mar 01 '20 at 15:43
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – user2864740 Mar 01 '20 at 23:10

1 Answers1

0

Thanks to comments made - I learned about the asynchronous behaviour of the code.

I changed the getJSON part to the following...

 $.ajax({
    url: query, 
    dataType: 'json',
    async: false,
    success: function(data) {
            obj = data;
            olength = obj.length;
            console.log(obj);
            // check array lengths work - which they do!
            console.log("Search Length="+olength);
            console.log("Text Length="+newtextpasted.length);
            console.log("Vocab Length="+newvocabpasted.length);
        }
        });

This made it synchronous (and therefore worked)... but is to be avoided (as is deprecated)... so need to learn more!

stilts77
  • 191
  • 3
  • 14