Can not set global variable javascript

Question

I am receiving an object array looking like this: I apologise, this is in dutch, it shouldnt be a problem but it does look a bit out of place.

{
  "data": [
    {
      "title": "Dit is een excercise",
      "application": "afbeeldingVerhalen",
      "language": "nl_NL",
      "id": "",
      "image": "groot.jpg"
    },
    {
      "objAudio": "groen.mp3",
      "objImage": "groen.jpg",
      "objText": "Dit is groen",
      "objLocation": {
        "X": "61",
        "Y": "78"
      }
    },
    {
      "objAudio": "pijl.mp3",
      "objImage": "",
      "objText": "Dit is een pijl. $%$%%",
      "objLocation": {
        "X": "61",
        "Y": "78"
      }
    },
    {
      "objAudio": "groot.mp3",
      "objImage": "",
      "objText": "Dit is groot!",
      "objLocation": {
        "X": "61",
        "Y": "78"
      }
    },
    {
      "objAudio": "wit.mp3",
      "objImage": "wit.jpg",
      "objText": "Dit is wit, wit is een kleur net zoals groen.",
      "objLocation": {
        "X": "61",
        "Y": "78"
      }
    },
    {
      "objAudio": "uit.mp3",
      "objImage": "uit.jpg",
      "objText": "Dit is buiten het plaatje, we noemen dit ook wel uit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. At enim hic etiam dolore. Quis Aristidem non mortuum diligit? Cur deinde Metrodori liberos commendas? Quod si ita se habeat, non possit beatam praestare vitam sapientia. Primum in nostrane potestate est, quid meminerimus? Verba tu fingas et ea dicas, quae non sentias? Duo Reges: constructio interrete. Tum Quintus: Est plane, Piso, ut dicis, inquit. Summus dolor plures dies manere non potest?",
      "objLocation": {
        "X": "61",
        "Y": "78"
      }
    }
  ]
}

i am using a $.get to get this information. within the $.get i can console.log(js_data['data'][0].title) which outputs "Dit is een excercise" however if i console.log this outside of the $.get i get undefined.

I did declare the variables outside of the $.get by simply var title; outside of the function.

I think its also good to note there is no error in the console.

Thanks in advance! Edit:

$(document).ready(function(){
    var js_data;
    var title;
    $.get("exercise.php", function(data){
        js_data = $(data).filter('.js_data');
        js_data = js_data.text();

        js_data =  JSON.parse(js_data);
        console.log(js_data);
        console.log(js_data['data'][0].title);
        title = js_data['data'][0].title;
        });
    console.log(title);
    $("#title").text(title);    
});

you have mixed data in your array, one with title property and the rest without. — Nina Scholz, Feb 14 '17 at 14:26
@Soshiro you cannot console a variable that you are setting in an asynchronous request unless you use callbacks or deferred (since you are using jQuery) — callback, Feb 14 '17 at 14:32
If i'm correct, $.get returns a promise, and runs in the background. The best way (in my opinion) is to just continue working from within the sussess callback. — Bas Pauw, Feb 14 '17 at 14:36

score 1 · Accepted Answer · answered Feb 14 '17 at 14:29

1

Ajax requests work asynchronously. At the point where you use

console.log(title);
$("#title").text(title);

, the request has not yet finished, so the var title is not yet set to the content of the ajax result.

answered Feb 14 '17 at 14:29

Constantin Groß

10,719
4
24
50

Thank you for your reply. So then how do i fix this? – Soshiro Feb 14 '17 at 14:31
1

See the linked duplicate questions. But still, let my answer your question with another question: Why not just put `$("#title").text(title);` in the callback of the get request? – Constantin Groß Feb 14 '17 at 14:34
Success Callback can be used in case of asynchronous behaviour. – Niraj Feb 14 '17 at 14:36
@Connum I hadn't thought of that. I read through the duplicate questions. I understand now, thank you for your help – Soshiro Feb 14 '17 at 14:39
You're welcome! @Niraj You don't have to tell me! :D That's why I asked OP why they not used the request callback to achieve this. – Constantin Groß Feb 14 '17 at 14:40
As specified in the jQuery [get(..)](https://api.jquery.com/jquery.get/) documentation, you should chain `get` with `done` function that is executed if the request succeed: `.done(function() { $("#title").text(title); });` – MaxZoom Feb 14 '17 at 14:42
@MaxZoom good catch! However, the docs do not state that this is the preferred way over the function argument, and it's not currently deprecated, so I didn't want to suggest more changes to the OP than necessary for this problem – Constantin Groß Feb 14 '17 at 14:46

Can not set global variable javascript

1 Answers1