Unable to pass return value of a XMLHttpRequest to a variable

Question

I am unable to assign the return value of a XMLHttpRequest (which searches for a string in a tiny csv file and returns its value in the desired language) to a variable. It always says that the string is undefined.

I have even added a delay to give time to the XMLHttpRequest to read the csv file (which is just a few lines btw) but to no avail.

Any suggestions please! I'm stuck!

function DisplayItemInCorrectLanguage()
{
        var str = GetLocalizedTerm ("CBRAND", Language);
        console.log('str: ', str); //Does not work. Error: 'str:  undefined'
}

function GetLocalizedTerm (itemname, language)
{
    var itn = itemname;
    var lng = language;

    var oReq = new XMLHttpRequest(); 
    oReq.onload = function()
    {
        //console.log("String is: ", this.responseText); //log is correct: 'String is:  CAR BRAND'
        //return this.responseText; //Does not return any value to DisplayItemInCorrectLanguage()
    };
    oReq.open("get", "GetLocalizedTermFromDictionary.php?itemname=" + itn + "&LANG=" + lng, true);
    oReq.send();
}

Nilesh Patel · Answer 1 · 2020-12-05T18:45:26.100

-1

This should work.

function GetLocalizedTerm (itemName, language){
 return new Promise((resolve, reject) => {
         var oReq = new XMLHttpRequest();
       oReq.open("get", "GetLocalizedTermFromDictionary.php?itemname=" + itemName + "&LANG=" + language, true);
   
        oReq.onload = () => {
            if (oReq.status >= 200 && oReq.status < 300) {
                resolve(oReq.response);
            } else {
                reject(oReq.statusText);
            }
        };
        oReq.onerror = () => reject(oReq.statusText);
        oReq.send();
    });
}

async function DisplayItemInCorrectLanguage()
{
        const language='en'
        var str = await GetLocalizedTerm ("CBRAND", language);
        console.log('str: ', str); 
}

edited Dec 05 '20 at 18:45

answered Dec 05 '20 at 18:18

Nilesh Patel

3,193
6
12

instead of oReq.onload? – jeddi Dec 05 '20 at 18:22
yeah. onload does not make sense here. – Nilesh Patel Dec 05 '20 at 18:24
`onload` makes perfect sense here, it is a much simpler approach to triggering a function when the data is loaded. Switching to `onreadystatechange` with the addition of a check for the readyState and status gives the same effect for a chunk more code … and doesn't address the problem at all. – Quentin Dec 05 '20 at 18:28
my bad. you are right.. – Nilesh Patel Dec 05 '20 at 18:31
try new code.. should work – Nilesh Patel Dec 05 '20 at 18:45
I tried the latest code. It returns: Str: Promise{: "pending"} – jeddi Dec 05 '20 at 18:51
i tested with some other api, and it did work.. please check if you have used api as intended to use. – Nilesh Patel Dec 05 '20 at 18:55
Re edit: While this technically works, it's quite bloated (the status check is pointless and it would be simpler to swap in `fetch` if you are going to use promises) and *completely lacking in explanation* which is why the OP thinks it doesn't work (because they are getting a promise back instead of the value they want). – Quentin Dec 05 '20 at 19:06
Could you please explain to me how to extract the value of the promise? Thank you – jeddi Dec 05 '20 at 19:10
any api call is async. hence, it always will return promise. – Nilesh Patel Dec 05 '20 at 19:11
// option 1 GetLocalizedTerm ("CBRAND", language).then(response=> { console.log('str: ', response); } ) – Nilesh Patel Dec 05 '20 at 19:15

Unable to pass return value of a XMLHttpRequest to a variable

1 Answers1