JavaScript JSON parse returning undefined

Question

I have the following function

function getSetting(item) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", "settings.json", true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            var data = JSON.parse(rawFile.responseText);
            return data.item;
        }
    }
    rawFile.send(null);
}

which I am testing like this

console.log(getSetting('restaurant_name'));

It is returning undefined

a console.log of data returns the JSON object of my JSON file, as expected.

a console.log of item returns restaurant_name, as expected.

I must be missing something obvious, but having looked at the other topics on Stackoverflow related to this I haven't come across anything yet.

I have tried using data[0].item to get the result but it also made no difference.

The contents of the settings.json file:

{
  "restaurant_name": "Example_Restaurant_Name",
  "restaurant_address": "Example Restaurant, England"
}

Help much appreciated in advance, thanks.

You just dont understand, that async functions dont have to return anything, instead you have to lear how to deal with promises and callbacks — webdeb, Jul 10 '17 at 06:47
@webdeb - Thanks. I did have a callback as per wmorrell's example before - it is data[item] _vs_ data.item that threw me off as every example I saw of getting JSON values referred to data.item for some reason. — Laplant1, Jul 10 '17 at 17:49

wmorrell · Accepted Answer · 2017-07-10T06:49:33.247

2

You are using an incorrect form of object lookup, as-is your code is looking for an item name on the JSON.
There is no way for your function to directly return from an asynchronous request.

Try this instead:

function getSetting(item, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", "settings.json", true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            var data = JSON.parse(rawFile.responseText);
            callback(data[item]);  // <----- THIS LINE CHANGES
        }
    }
    rawFile.send(null);
}

getSetting('restaurant_name', function (value) { console.log(value); });

edited Jul 10 '17 at 06:49

answered Jul 10 '17 at 06:41

wmorrell

4,988
4
27
37

1

Yes, I would provide a second argument, like `getSetting(item, callback)` and explain how to use it.. – webdeb Jul 10 '17 at 06:46
Doh, completely skipped over that, I'll edit to include. – wmorrell Jul 10 '17 at 06:46
Thanks, this worked. – Laplant1 Jul 10 '17 at 17:47

Stephen R. Smith · Answer 2 · 2017-07-10T06:54:04.770

I believe the problem is in the return statement.

return data.item

This is going to try to return a value in the data object for the key 'item', when what you want is to return the value in the data object with the key stored in the item variable.

I think the correct syntax for what you want is:

return data[item]

I also don't think that you can return a value from your function here - so you'll need to either define a callback function once the async request has returned the value, or set a variable that's scoped outside of the function.

Someone else just posted an answer that makes use of a callback function, so I would suggest using that approach.

Thanks Stephen, that makes sense. – Laplant1 Jul 10 '17 at 17:50 — Laplant1, Jul 10 '17 at 17:50

JavaScript JSON parse returning undefined

2 Answers2