Returning data from my JavaScript function

Question

I have been having issues getting the data I am requesting to display correctly it was being displayed as undefined.

 fetch(url)
.then(res => res.json())
.then((manager) => {
/* console.log(manager); */ 
    for (i in manager.data){
        var row = $('<div id="Data">' + '<br>' + getLogo(manager, i) + '<br>'
                + '<br>' + '<p1>' + getName(manager, i) + '</p1>'   
                + getAdd1(manager, i) + getAdd2(manager, i) + getAdd3(manager, i) 
                + getCity(manager, i) + getPcode(manager, i) 
                + '<br>' + getCountry(manager, i) + '<br>'

My issue is with the call to getCountry

                + '<br>' + getWeb(manager, i) + '<br>' 
                + '<br>' + getPhases(manager, i) 
                + '<br>' + getPspon(manager, i) 
                + '<br>' + getOspon(manager, i) + '<br>'
                + '<br>' + getDesc(manager, i) + '<br>' 
                + '<br>' + '</div>' + '<br>');

        $('#Results').append(row);
    }           
})
};

After some research I think the problem was that the getCountry method is so long it carries on with the rest of the code and displays it as undefined.

I then came across Promises and tried to add this to the function but now the html page just shows [object Promise]. The getCountry function is shown below and was the same before the addition of the Promise code.

This is what I am trying to achieve

Checks that there is an address and then checks for a country code. Assigns the 3 digit numerical country code to country. Then loads a JSON containing ISO 3166 data process this into a searchable object. Searches the objects for a match to the value stored in country. Then assigns the name field from the matched object to result and then returns it to be displayed at the end of the address.

function getCountry(manager, i){
    return new Promise(function(resolve, reject) {
        if(manager.data[i].attributes.addresses[0] != null && manager.data[i].attributes.addresses[0].country != null){
            var country = manager.data[i].attributes.addresses[0].country;
            var c = country.toString();
            let url = 'http://data.okfn.org/data/core/country-codes/r/country-codes.json';
            fetch(url)
            .then(res => res.json())
            .then((data) => {
            console.log(data);
            console.log(manager);
                        for(var i=0, length=data.length; i<length; i++){
                        if(data[i].M49 === c){
                            var result = data[i].name;
                            console.log(result);
                            Promise.resolve(result);

                        }
                    }
            })
        }
        else {
            var reason = " ";
            Promise.reject(reason);
        }
    }
    );
}

Where am I going wrong?

Updated code using @Zohaib Ijaz suggestion

fetch(url)
.then(res => res.json())
.then((manager) => {
/* console.log(manager); */ 
    for (i in manager.data){
        /* use a Promise in order to receive the result for the below function */
        getCountry(manager, i).then((cm)=> {
        var row = $('<div id="Data">' + '<br>' + getLogo(manager, i) + '<br>'
                + '<br>' + '<p1>' + getName(manager, i) + '</p1>'   
                + getAdd1(manager, i) + getAdd2(manager, i) + getAdd3(manager, i) 
                + getCity(manager, i) + getPcode(manager, i) 
                + '<br>' + cm + '<br>'
                + '<br>' + getWeb(manager, i) + '<br>' 
                + '<br>' + getPhases(manager, i) 
                + '<br>' + getPspon(manager, i) 
                + '<br>' + getOspon(manager, i) + '<br>'
                + '<br>' + getDesc(manager, i) + '<br>' 
                + '<br>' + '</div>' + '<br>');

        $('#Results').append(row);
        });
}
});
}

The getCountry function

function getCountry(manager, i){
    return new Promise(function(resolve, reject) {
    if(manager.data[i].attributes.addresses[0] != null && manager.data[i].attributes.addresses[0].country != null){
        var country = manager.data[i].attributes.addresses[0].country;
        var c = country.toString();
        let url = 'http://data.okfn.org/data/core/country-codes/r/country-codes.json';
        fetch(url)
        .then(res => res.json())
        .then((data) => {
                    for(var i=0, length=data.length; i<length; i++){
                        if(data[i].M49 === c){
                        var result = data[i].name;
                        /* console.log(result); */
                        resolve(result);
                        }
                        else {
                        var reason = "";
                        reject(reason);
                        }
                    }
        })
    }
    else {
        var reason = "";
        reject(reason);
    }

}
);
}

This is what I see in the Chrome console (24 times)

Uncaught (in promise) test.html:1

The problem is not that function is long-running; it's that the function is asynchronous. You're right to investigate Promises (or even Futures/Tasks), but I think you need to do a little more reading into how they work and how to work with them. — Scott Sauyet
– Scott Sauyet, Commented Apr 24, 2017 at 1:16

Arbauman · Accepted Answer · 2017-04-24 01:42:10Z

What I noticed is that you're calling Promise.resolve(result); when you instantiated the Promise at the start of the function, you passed it a function with two arguments, resolve and reject. Those are what you should be using to 'end' your Promise, so changing them to just resolve(result) and reject(reason) should let your Promise resolve properly.

That said, the point of a Promise is to say "do this, and when that's done, .then do this other thing". So you'd need something like

getCountry(manager, i).then(function(result) {
    // result is whatever you passed into resolve() in getCountry
    // everything in here is done after getCountry finishes running
    // and returns a value 
}, function(rejection) {
    // rejection is whatever you passed into reject() in getCountry
    // this only happens if things didn't work
}

I'm not sure that Promises would work since you're calling the function in the middle of a concatenation. If your other functions make asyncronous calls, an alternative you might consider is to rewrite all of your asynchronous functions as Promises, then use Promise.all() to wait for all of them to resolve before proceeding to concatenate them into HTML. Something like this

var p1 = getLogo(manager, i);
var p2 = getName(manager, i);
var p3 = getAdd1(manager, i);
...

Promise.all([p1, p2, p3]).then(function(results) {
    results.join('<br>')
    // Whatever else you want to happen once all the functions are finished.
})

Zohaib Ijaz · Accepted Answer · 2017-04-24 01:18:09Z

0

getCountry is not a synchronous function call. You need to wait for response.

fetch(url)
.then(res => res.json())
.then((manager) => {
/* console.log(manager); */ 
    for (i in manager.data){
        getCountry(manager, i).then((cm)=> {
          // Add other values as well. 
          var row = $('<br>' + cm + '<br>');
          $('#Results').append(row);
        });   
    }
 });

answered Apr 24, 2017 at 1:18

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

3 Comments

pedaars Over a year ago

I have used this approach but I am receiving multiple uncaught exceptions how would I handle them?

Zohaib Ijaz Over a year ago

@Bob Can you show your updated code and exceptions logs?

pedaars Over a year ago

I have 2 pages of data being displayed using pagination. Page 1 = 24 results and page 2 = 8 results. When my code gets to index 23 on page 1 the objects has no address stored but instead of returning an empty string which is what I want. It returns the result which is UK as if it did have an address and displays that on my web page 24 times

Collectives™ on Stack Overflow

Returning data from my JavaScript function

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related