function reading JSON data not passing to variables

Question

I am creating a function to read different JSON files. The problem is when I try to pass the array. I keep getting 'undefined' once I am back to my primary function. Reading the file works but when I try to use the variable I get 'undefined'. I could use some help. thanks.

This is the file I read 'data.json':

[
    {
        "code":"10000",
        "name":"new",
        "filter":"Office",
        "label":"NEW"
    },
    {
        "code":"10001",
        "name":"classic",
        "filter":"Office",
        "label":"CLASSIC"
    },
    {
        "code":"10002",
        "name":"old",
        "filter":"Office",
        "label":"OLD"
    }
]

Here's my code:

function readfile(myfile) {

    var mydata;

    $.get(myfile, function (data) {

        mydata = JSON.parse(data);

        console.log(mydata); // result ok

    });
    console.log(mydata); // undefined

    return (mydata); // return  'undefined'
}

var content = readfile('data.json'); //should be an array

console.log(content); // undefined

mydata is not set when you get to console.log(mydata) because it is ran before the HTTPRequest finishes. — Zachary McGee
– Zachary McGee, Commented Nov 13, 2019 at 21:04

Tristan · Accepted Answer · 2019-11-13 21:12:37Z

2

You're almost there!

The jQuery $.get() method is an asynchronous call. That means that instead of making the request to get myfile, waiting until it is complete, and then continuing from there, the code will make the request and continue on while the request is done in the background.

There are two things you can do here.

The first thing you can do is simply move your logic inside the callback function like so

$.get(myfile, function (data) {
    mydata = JSON.parse(data);
    console.log(mydata); // do whatever you need 
});

However, if you want to continue using the readfile method, you can make the $.get request synchronous, wait for the response, then return from it.

Like so:

function readfile(myfile) {
   var mydata; 
   $.get({
        url: myfile,
        async: false,
        success: function(data) {
            mydata = data;
        }
   });
   return mydata;
}

answered Nov 13, 2019 at 21:12

Tristan

3,5783 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Magens Over a year ago

works with the request synchronous. thank you for your answer.

Tristan Over a year ago

@Magens No problem! Glad I could help. Feel free to accept this answer if it was correct!

Zachary McGee · Accepted Answer · 2019-11-13 21:07:18Z

1

Get is asynchronous meaning that it will not execute in the order it is written.

$.get(myfile, function (data) {

    mydata = JSON.parse(data);

    console.log(mydata);              // result ok

});

This is why

console.log(mydata);                 // undefined

return (mydata);

is undefined, because the values are not actually set from get().

answered Nov 13, 2019 at 21:07

Zachary McGee

5041 gold badge4 silver badges16 bronze badges

1 Comment

Magens Over a year ago

Thank you, I didn't realize it was asynchronous.

Collectives™ on Stack Overflow

function reading JSON data not passing to variables

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related