0

So I'm on the last hurdle of getting a script working for my webpage. I'm having an issue with a global variable always coming back as undefined. I'm not sure if its an issue passing the variable outside the function or if its a timing issue (which I really don't know how to sort)


function csvConvert(data) {
    //Data is usable here
    console.table(data);
    results = data.map(element => ({id: element.id}))

    string = JSON.stringify(results);

    window.cleanup = string.replace(/[&\/\\#+()$~%.'":*?<>{}]/g, '').replace(/id/g, '').replace(/null/g, '').slice(0, -2).substring(1); // the variable i need to use later outside the function
    console.log(cleanup);
    return cleanup;
}

function parseData(url, callBack) {
    Papa.parse(url, {
        header: true,
        download: true,
        dynamicTyping: true,
        complete: function(results) {
            callBack(results.data);
        }
    });
}
const csvfile = document.getElementById('platform').innerHTML; // use element Id to choose file
parseData("/csv/"+ csvfile + ".csv", csvConvert);


test = "1627,2485,1075,3889,3810,23695,7862,1631,4156,9890"
final = `fields name,summary,cover.image_id; where id = (` + csvConvert.cleanup + `); limit 50; sort first_release_date;`; //csvConvert.cleanup coming back as undefined
console.log(final);
 xhr = new XMLHttpRequest();
xhr.onload = success; // call success function if request is successful
xhr.open("POST", "https://foo.execute-api.us-west-2.amazonaws.com/production/v4/games/");
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("x-api-key", "foo");

xhr.send(final); // send the request to the server.
console.log(this.responseText);

function success () {
    if (xhr.readyState == 4) {
        if (xhr.status === 200) {
    const platform = document.getElementById('platform').innerHTML;
    var json = JSON.parse(xhr.responseText); //parse the string to JSON
    // FETCHING DATA FROM JSON FILE
        var tr;
    // build the table
for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" 
    + '<div class="image">'   
    + '<img src = "https://images.igdb.com/igdb/image/upload/t_cover_big/' 
    + json[i].cover.image_id
    + ".png" 
    + '"></img>'
    + "</div>" 
    + "</td>");

    tr.append("<td>" 

    + '<div class="name">' 
    + json[i].name 
    + "</div>" 

    + '<div class="summary">'
    + json[i].summary 
    + "</div>" 

    + "</td>");
    
    $('table').append(tr);
    
}}}};

I know the rest of the script works because of the test variable I have in place, so it's just getting "cleanup" to work correctly.

Any help would be greatly appreciated

liam gore
  • 17
  • 3
  • 1
    Yes, the issue is a timing issue. You should move the logic that relies on `cleanup` into the `csvConvert` function. If you don't want to move it there directly, you can make your own function that contains the logic that reslies on `cleanup` and make it accept `cleanup` as an argument, and then call that function from within `csvConvert()`. This way you're avoiding global variables also. – Nick Parsons Jun 22 '22 at 12:33
  • 1
    Why is it always the simplest of fixes? I moved the XMLHttpRequest logic up to CSV convert and it's working great! Thanks! – liam gore Jun 22 '22 at 14:45

0 Answers0