JavaScript variable doesn't exist

Question

So I'm creating a simple Web Page that takes data from a json file and appends a number of paragraphs equal to the number of objects in the json file array:

$(function () {

    function init() {
       console.log("OK");
       var dat;
       var i;
       load();
       fill();
   }

   function load()
   {
       $.get("data.json", function (data, status) {
           dat=data;
           console.log(dat);
       })
   }

   function fill()
   {
       console.log(dat);
       for(i=0; i<dat.length(); i++) $("#container").append("<p>Testing</p> <br/><br/>")
   }

    $(".front").on("load", init());
});

However when I run the web page the first time I try to do a console log it prints out the data however the second time, inside the fill() function it says:

"Uncaught ReferenceError: dat is not defined"

Any ideas?

Reopened because while this does have the "return the result of an asynchronous function" issue, it's just one of several. — T.J. Crowder
– T.J. Crowder, Commented Apr 8, 2018 at 13:31
make the dat a gloable variable... Hint, outside the init() function. — Dalokey
– Dalokey, Commented Apr 8, 2018 at 13:34

T.J. Crowder · Accepted Answer · 2018-04-08 13:30:55Z

There are several problems:

dat is a local variable within your init function, so naturally code in your load function doesn't have access to it.
You're calling init and then passing its return value into on, not hooking up init as a load handler.
$.get is asynchronous, so just calling load and then calling fill won't work, fill will run before the GET has completed.

See comments:

$(function () {
   var dat; // *** Make this global to the code (it's not actually global, which is good)

   function init() {
       load(fill); // *** Pass `fill` into `load`
   }

   function load(next) // *** Accept the callback to call when ready
   {
       $.get("data.json", function (data, status) {
           dat = data;
           console.log(dat);
           next(); // *** Call it
       })
   }

   function fill()
   {
       console.log(dat);
       for(i=0; i<dat.length(); i++) $("#container").append("<p>Testing</p> <br/><br/>")
   }

    $(".front").on("load", init); // *** No () on init, you want to pass the function into `on`, not *call* the function
});

Some other notes:

You might also look into promises.
Unless you need dat for more than fill, consider not having the dat variable at all; just have load call fill with the data as an argument.

Mirko Acimovic · Accepted Answer · 2018-04-08 13:27:50Z

0

Variable dat is in scope of function init() and it doesnt exists outside that function , move variable dat outside function.

var dat;

function init(){

// rest of code

}

answered Apr 8, 2018 at 13:27

Mirko Acimovic

5062 silver badges9 bronze badges

Collectives™ on Stack Overflow

JavaScript variable doesn't exist

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related