My function is returning [Object promise]

Question

I'm trying to get a list of star wars characters and their homeworlds. the homeworld is a link so it needs another fetch to get the name, but in the console it returns [Object promise]. I think that the problem is that trying to get the actual planet name takes too long, but how do I fix this?

const processStarWars = function (jsonObject) {
    let arrStarWarsPeople = jsonObject.results;

    for (const personage of arrStarWarsPeople){
        const name = personage.name;
        const birthYear = personage.birth_year;

        const planet = fetch(personage.homeworld)
                .then(function (response) {
                //antwoord van functie fetch bekijken
                if (!response.ok){
                    throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
                }else{
                    console.log("object goed gevonden");
                    return response.json();
                }
            }).then(function(jsonObject){
                //alles is ok dus, we kunnen het object verwerken en doorgeven
                console.log(jsonObject.name);
                return jsonObject.name;
            }).catch(function (error) {
                //opvangen van een eventuele fout
                console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
            });
        
        console.log(`${name} - ${birthYear} - ${planet}`)
    }


};


const loadStarWarsInfo = function() {
    fetch("https://swapi.co/api/people/")
        .then(function (response) {
            
            if (!response.ok){
                throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
            }else{
                console.log("object goed gevonden");
                return response.json();
            }
        }).then(function(jsonObject){
        
        console.log("alles oke we kunnen verder");
        processStarWars(jsonObject);
    }).catch(function (error) {
        
        console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
    })
};

document.addEventListener('DOMContentLoaded', function() {
    loadStarWarsInfo();
});

this is outside the promise and runs immediately `console.log(`${name} - ${birthYear} - ${planet}`)` — Mark Schultheiss, Mar 24 '20 at 15:44
`fetch` returns a promise. You can't change that. Use the promise instead. You're already getting the name successfully here: `console.log(jsonObject.name)`. Use it. — Quentin, Mar 24 '20 at 15:44
(1) Please make your question clearer. The title says that your function is returning [Object Promise], but there are two functions, neither of which is returning [Object Promise]. The [Object Promise] is the thing printed by the function, not the thing returned by the function. (2) `planet` is a Promise, not a string. That's why printing it says [Object Promise]. You need to wait for the promise to resolve and then print the result. — Raymond Chen, Mar 24 '20 at 15:44
Look for articles on AJAX or asynchronous programming, once you'll understand the concept, you will have a better understanding of what you're doing. — Laurent S., Mar 24 '20 at 15:46

score 0 · Answer 1 · answered Mar 24 '20 at 15:44

You can fix this issue by waiting for the fetch to finish like await fetch(personage.homeworld) and need to make the processStarWars function async.

DEMO:

const processStarWars = async function (jsonObject) {
    let arrStarWarsPeople = jsonObject.results;

    for (const personage of arrStarWarsPeople){
        const name = personage.name;
        const birthYear = personage.birth_year;

        const planet = await fetch(personage.homeworld)
                .then(function (response) {
                //antwoord van functie fetch bekijken
                if (!response.ok){
                    throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
                }else{
                    console.log("object goed gevonden");
                    return response.json();
                }
            }).then(function(jsonObject){
                //alles is ok dus, we kunnen het object verwerken en doorgeven
                console.log(jsonObject.name);
                return jsonObject.name;
            }).catch(function (error) {
                //opvangen van een eventuele fout
                console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
            });
        
        console.log(`${name} - ${birthYear} - ${planet}`)
    }


};


const loadStarWarsInfo = function() {
    fetch("https://swapi.co/api/people/")
        .then(function (response) {
            
            if (!response.ok){
                throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
            }else{
                console.log("object goed gevonden");
                return response.json();
            }
        }).then(function(jsonObject){
        
        console.log("alles oke we kunnen verder");
        processStarWars(jsonObject);
    }).catch(function (error) {
        
        console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
    })
};

document.addEventListener('DOMContentLoaded', function() {
    loadStarWarsInfo();
});

My function is returning [Object promise]

1 Answers1