Marvel API yields [object, object] for nested arrays like events, while basic fields display fine. How can I properly render these nested collections?
document.getElementById('btn').addEventListener('click', () => fetch('API_ENDPOINT').then(resp => resp.json()).then(result => console.log(result.data.results)));
hey, try mapping the array your self. instead of logging the object, do something like result.data.results[0].events.map(item=>item.name) so you print each name
In my experience, the solution was to traverse the nested arrays explicitly rather than expecting them to be rendered properly by default. Instead of logging the object directly, one can iterate over the array using methods such as map or forEach to extract, for example, event names or any other properties from the nested objects. This gives full control over how each element is displayed and prevents the [object, object] output. Structuring the code this way not only makes the data clearer but also facilitates potential further processing.
Working with the Marvel API also led me down the path of dealing with nested objects not displaying as expected. I found that directly logging the nested arrays always resulted in the [object, object] issue because browsers can’t render objects without proper string conversion. In my project, I implemented a recursive function to walk through each array and explicitly retrieve the needed properties. Using JSON.stringify during debugging also helped to reveal the hidden structure, making it easier to eventually design a mapping function to output the desired information.
hey i fixed it by json.strngfy-ing the nested array to see what’s inside then mapping over it to pull the fields i needed. its less magic and more explicit. try it!