Why doesn't document.ready work in this case?

Question

Why doesn't document.ready work in this case?

If I use this:

<script>
    $(document).ready(function() {
        if (window.localStorage.getItem('createTicket')) {
            var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
        }
    });
</script

I see an error in the console:

Unprepared ReferenceError: createTicketInfo is undefined

enter image description here

But if I remove document.ready:

<script>    
    if (window.localStorage.getItem('createTicket')) {
        var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
    }   
</script>

Everything is good:
enter image description here

Why?

+3

javascript jquery

Evgeniy 23 june 17 at 2:41

source to share

2 answers

ibrahim mahrir · Answer 1 · 2017-06-23T02:47:18+0000

This is because in the first example createTicketInfo

only appears in the callback (function) ready

.

function test() {
  var boo = "Hi! I'm boo.";
  // ...
  console.log(boo); // visible here
}
test();

console.log(boo); // not visible here (even if we call test first)

Run code Hide result

The second example createTicketInfo

does not fit into a function, so it is global (visible everywhere).

if(true) {
  if(true) {
    if(true) {
      var foo = "Hi! I'm foo.";
      // ...
      console.log(foo); // visible here
    }
  }
}

console.log(foo); // visible here too (because javascript doesn't have block scopes)

Run code Hide result

Always remember that javascript has function scopes but does not block scopes.

Note. ... As @nnnnnn mentioned in the comment below, ECMAScript 6 introduced a new way to declare variables using let

or const

that respect block scopes. So:

if(true) {
  let zoo = "Hi! I'm zoo.";
  // ...
  console.log(zoo); // only visible inside this block
}

console.log(zoo); // not visible here

Run code Hide result

InfiniteStack · Answer 2 · 2017-06-23T03:05:12+0000

Something else doesn't fit in another section of your code.

Take a look at this fiddle I created.

It reads and writes the value accurately. Exactly the same code:

https://jsfiddle.net/nxka5h7y/2/

<head>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    window.localStorage.setItem('createTicket', '{"a":"1"}');
    $(document).ready(function() {
        if (window.localStorage.getItem('createTicket')) {
            var createTicketInfo =     JSON.parse(window.localStorage.getItem('createTicket'));
            console.log(createTicketInfo);
        } else { console.log("none"); }
    });
</script>
</head>
<body>
<script>
</body>

The only thing I added was actually setting the createTicket element to localStorage to make sure the if if statement inside the document / ready gets through.

My semi-logical guess is that the JSON stored in createTicket is malformed based on how it was set (which is not shown in your example.) I really don't think that's the problem. But, actually, your example gives exact results in jFiddle. Look elsewhere in your code. For example, the part where you actually set createTicket. Or that your jQuery is really included or something silly.

Why doesn't document.ready work in this case?

More articles: