Why my nested object is create outside of itself?

Question

Basically, when I try to create an Object and fill it with data from my Json file, the Object builds itself out of itself?

function fetchJson(name) {
var dico = {};
fetch('../json/' + name + '.json')
    .then(response => response.json())
    .then(data => {
        for (var x in data) {
            if(!isClubExist(dico, data[x].Club)) { // Just return if the club exist or not in the object
                addClub(dico, data[x].Club);
            }
            addPlayer(dico, data[x].Club, data[x].Poste, fullName(data[x].Nom, data[x].Prénom));
        }
})
return dico;
}

https://i.stack.imgur.com/9XMdH.jpg (my result)

But when I try it by hand everything works fine.

var subjectObject = {
    "Front-end": {
      "HTML": ["Links", "Images", "Tables", "Lists"],
      "CSS": ["Borders", "Margins", "Backgrounds", "Float"]
    },
    "Back-end": {
      "PHP": ["Variables", "Strings", "Arrays"],
      "SQL": ["SELECT", "UPDATE", "DELETE"]
    }
}
                        
console.log(subjectObject);

https://i.stack.imgur.com/kiR6w.jpg (The type of result I need)

I'm new to JS and I would like to know what am I doing wrong.

@evolutionxbox I don't really know how to explain it clearly. When I try to iterate on my object I can't cause it's empty but when I print it in the console I can still see the objects that are supposed to be in it — Hezaerd, Aug 06 '22 at 21:11
Do you mean "main parent is not created and just the children get created"? — Gergo, Aug 06 '22 at 21:19
@Gergo I'm not sure but maybe ? I really now nothing about JS.. — Hezaerd, Aug 06 '22 at 21:21
I don't know what "builds itself out of itself" means, or how the first imgur link fits in. (Is that the input or the output?) You're also calling 4 functions which we haven't seen (`isClubExist`, `addClub`, `addPlayer` and `fullName`). You've got `data[x].Club`, but there's no mention of `Club` in any of the json or console.log snippets. In short, there's a lot of missing information. However, see Preet Nagda's answer and my comment on it. — David Knipe, Aug 06 '22 at 22:05

score 1 · Answer 1 · edited Aug 06 '22 at 23:10

fetch is asynchronous in nature. fetch will wait for the api response and let the code execution move ahead. Once the response is received, the script in the "then" block gets executed.

In this case, return dico gets executed first and then fetch receives the response from the api and makes the changes, hence the empty object.

You can return promise from your function like this

function fetchJson(name) {
    return fetch('../json/' + name + '.json')
    .then(response => response.json())
    .then(data => {
        var dico = {};
        for (var x in data) {
            if(!isClubExist(dico, data[x].Club)) { // Just return if the club exist or not in the object
                addClub(dico, data[x].Club);
            }
            addPlayer(dico, data[x].Club, data[x].Poste, fullName(data[x].Nom, data[x].Prénom));
        }
        return dico;
    });
}

And from where you call the function do this

fetchJson(name).then(dico => { 
    // do whatever....
});

Yes, it's true that OP's `fetchJson` function returns an empty object. However, it later mutates that same object when it receives the response. "But when I try it by hand everything works fine." <- This might mean that OP manually called `console.log`, after the object had been mutated. However, I agree that this is the way to fix it. — David Knipe, Aug 06 '22 at 21:56

Why my nested object is create outside of itself?

1 Answers1