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](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call)" issue, it's just one of several. — T.J. Crowder, Apr 08 '18 at 13:31
make the dat a gloable variable... Hint, outside the init() function. — Dalokey, Apr 08 '18 at 13:34

score 4 · Accepted Answer · answered Apr 08 '18 at 13:30

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.

score 0 · Answer 2 · answered Apr 08 '18 at 13:27

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 08 '18 at 13:27

Mirko Acimovic

508
2
9

JavaScript variable doesn't exist

2 Answers2