trying to consume a URI as a JSON, $.getJSON is not working

Question

I thought I was getting a document URI that was a json string and converting it to an object correctly, but my code seems not to be working and giving me like it comes back null on the various elements.

My javascript to get the parameters passed to a webpage, and then the results of

<script type="text/javascript">
            // ==UserScript==
            // @name         Enable alert()s
            // @match        //jsfiddle.com/*
            // @require      http://code.jquery.com/jquery-latest.min.js
            // @grant        unsafeWindow
            // ==/UserScript==
            this.$ = this.jQuery = jQuery.noConflict(true);

            $( document ).ready(function() {
                  var QueryString = function () {
                                  // This function is anonymous, is executed immediately and 
                                  // the return value is assigned to QueryString!
                                  var query_string = {};
                                  var query = window.location.search.substring(1);
                                  var vars = query.split("&");
                                  for (var i=0;i<vars.length;i++) {
                                    var pair = vars[i].split("=");
                                        // If first entry with this name
                                    if (typeof query_string[pair[0]] === "undefined") {
                                      query_string[pair[0]] = decodeURIComponent(pair[1]);
                                        // If second entry with this name
                                    } else if (typeof query_string[pair[0]] === "string") {
                                      var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
                                      query_string[pair[0]] = arr;
                                        // If third or later entry with this name
                                    } else {
                                      query_string[pair[0]].push(decodeURIComponent(pair[1]));
                                    }
                                  } 
                                  return query_string;
                                }();

            //we could use this on the dom somewhere too!!!!!!! to lable what we are looking at! :)
            theFile=QueryString.b;
            theFolder = QueryString.a;
            theJson = $.getJSON(QueryString.c);
            console.log(QueryString.c);
            $( "p" ).text( "You are viewing:  " + theJson.name );
            //the value for theJson.name is undefined :(


            });

        </script>

The value for items like theJson.name is undefined, yet this is the string that is print to the console:

{"name":"PDS_03962670","cdate":"2014-06-12","test":"test2"}

So to me this should work, yet does not, not sure what I am missing. If the string above before the #.getJSON() call is correct then no idea what I am doing wrong in my console.log

Note that `.getJson` is basically a shorthand version of `.ajax` as is explained in the [docs](http://api.jquery.com/jquery.getjson/). So you *really* need to read and understand the dupe. — Matt Burland, Apr 24 '17 at 20:25

score 3 · Accepted Answer · answered Apr 24 '17 at 20:23

3

$.getJSON is asynchronous. So the console.log happens before the call to $.getJSON is done. What you need to do is something along these lines:

$.getJSON(QueryString.c, function(data) {
    console.log(data);
});

answered Apr 24 '17 at 20:23

Francisco

1,490
3
10
17

Actually, the other post of the JSON.parse is really what I wanted to use, getJSON was overkill. – Codejoy Apr 24 '17 at 20:40

trying to consume a URI as a JSON, $.getJSON is not working

1 Answers1