Why does $.getJSON only work when using string literals, and throws undefined errors when using variables?

Question

So I think this is likely a scope issue, but am a bit stumped as to why I cannot access the response data from a $.getJSON() request using a variable.

When calling $.getJSON('fruits.json') the data comes back as expected, and I can swap 'fruits.json' for cat+'.json' which also seems to work fine.

However, when evaluating the data response, using 'data.cat.length' comes back undefined, even though cat = fruits which is the name of the object in the fruits.json file.

Hard-coding 'data.fruits.length' works as expected, but swapping 'fruits' for the variable 'cat' returns undefined.

Not sure what I'm doing wrong, but the goal is to have the createQuestion(category) function load up a different JSON file dynamically based on the category input.

    function createQuestion(category){

          var cat = category;

          // JSON Data Import
          $.getJSON('fruits.json', function(data) {

            // Generate Cards
            var cards = [];
            var display = [];
            for (i=0; i<data.fruits.length; i++) {
              cards.push(data.fruits[i]);
            }

I assume that var cat = 'fruits' is the same as 'fruits', but seems the data object does not agree. Any thoughts on what I'm doing wrong?

Welcome to Stackoverflow. You say: _I cannot access the response data from a $.getJSON()_ - but then explain how you are able to do just that: _data comes back as expecte_ - then you say _I can swap 'fruits.json' for cat+'.json' which also seems to work fine_ - seems? it either does or it doesn't. Either way, you've not provided any code that performs that step for us to evaluate. The rest is irrelavant until we understand what _swapping fruits for cats_ actually looks like in code. — Randy Casburn, Jun 02 '19 at 16:52

score 0 · Accepted Answer · answered Jun 02 '19 at 17:01

How is the response data object laid out; i.e. can you actually post the structure of the data variable in your response callback?

Without seeing the data, my initial guess is that when you say data.cat.length, you are trying to get the property on the data object literally called 'cat'. Not the property whose name is the category that was passed into your function as an argument, but just 'cat'.

Put another way, data.cat.length would work if your JSON response looked something like this:

{ 
  "cat": ["tabby", "siamese", "persian"]
  ...
}

Conversely, data.fruits.length is probably working, because I'm guessing your response is an object like this:

{
  "fruits": ["apple", "orange", "banana"]
  ...
}

But if your response is an object like this last one, and you ask for data.cat.length, data.cat is most likely going to come back undefined.

If you have a response object like this, but want to access the "fruits" part of it through a category variable, you need to access the object properties as given in this answer. So, in your case:

var cat = "fruits"
data[cat].length // should be 3, with our example response above

So maybe you need to modify your function to be:

function createQuestion(category){
  var cat = category;

  // JSON Data Import
  $.getJSON(cat + '.json', function(data) {
    // Generate Cards
    var cards = [];
    var display = [];

    for (i=0; i < data[cat].length; i++) {
      cards.push(data[cat][i]);
    }

That said, if your JSON response is not something like I guessed above, I might have answered a completely irrelevant question :)

Brilliant answer, just needed to reference it correctly with the bracket notation and now is working as expected. — bsmma, Jun 02 '19 at 19:54
{ "fruits" : [ {"name":"apple", "spanish":"manzana" }, { "name":"avocado", "spanish":"aguacate" }, { "name":"banana", "spanish":"platano" }, { "name":"blueberry", "spanish":"arandano" }, — bsmma, Jun 02 '19 at 19:54

Why does $.getJSON only work when using string literals, and throws undefined errors when using variables?

1 Answers1