JSON.stringify() returns empty nested objects {} but works in console

Question

In a Django/React app I am building, I use an API call to get some ids, which returns an object like this:

{
    "0": {
        "0": "7y8X0Z04gJCKtfrnSAMywJ",
        "1": "781V2Y5LPtcpgONEOadadE"
    },
    "1": {
        "0": "7nCONy10IHp7XD3oYZ0lcx"
    }

    ...

}

I want to then use JSON.stringify() to send it in another API request, but when I log it in console it looks like this:

{"0":{},"1":{}, ...

If I create a mock object of the same structure and stringify it, it works as expected (logged in console and confirmed by sending to my API:

testObj stringify {"0":{"0":"7y8X0Z04gJCKtfrnSAMywJ","1":"781V2Y5LPtcpgONEOadadE"},"1":{"0":"7nCONy10IHp7XD3oYZ0lcx"}}

also, if I save my object locally in console, then stringify it, it works: console.log screenshot

If I can log the object properly, and stringify in console, why won't it work in the below code? allTopTracksObj is my object

function addItemsToPlaylist(allTopTracksObj, playlistId) {
        
        const encodedPlaylistId = encodeURIComponent(playlistId);
        const testObj = {
            0: { 0: '7y8X0Z04gJCKtfrnSAMywJ', 1: '781V2Y5LPtcpgONEOadadE' },
            1: { 0: '7nCONy10IHp7XD3oYZ0lcx', }
        }
        console.log('testObj', testObj)
        console.log('allTopTracksObj', allTopTracksObj)
        console.log('testObj stringify', JSON.stringify(testObj))
        console.log('allTopTracksObj stringify', JSON.stringify(allTopTracksObj))

        fetch(`/spotify/add-items-to-playlist/?playlistId=${encodedPlaylistId}`,
            {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                method: "POST",
                body: JSON.stringify(allTopTracksObj)
            })
            .then(function (res) {
                console.log('addItemsToPlaylist result', res) })
            .catch(function (res) { console.log(res) })
    }

This function is called after ensuring the object is fully generated with an async/await call:

await createTopNTracksArray(artistIdArray).then((obj) => {
            if (Object.keys(obj).length > 0 && playlistId.length > 0) {
                addItemsToPlaylist(obj, playlistId);
            }

I also read some answers that hinted that the objects may not be enumerable (if I built them incorrectly), but checking in console confirms it is

Appreciate any help, thanks.

You should also show us what's the source of `allTopTracksObj`. My best guess is that those properties aren't enumerable. The console isn't so much reliable for this type of issue — Christian Vincenzo Traina, Mar 04 '23 at 21:51
what does `createTopNTracksArray` do? `console.log(someobject)` in the browser can be misleading, because the console keeps a reference to `someobject`, and if that is something that is filled via some asynchronous process, it might look like it was aready complete when the console log was called, even if in fact it wasnt ... But `JSON.stringify` stringifies the object as it really was in that moment — derpirscher, Mar 04 '23 at 21:52
You can make a simple test: Write the following in your browser developer console: `var x = {}; console.log(x); setTimeout(() => {x.foo = "bar"},100);` You will notice, when you expand your `x` in the console it will have a `foo` property, even if it's guaranteed, that that `foo` wasn't part of the object when you called `console.log` (at least with chrome,not sure for other browsers ...). See also https://stackoverflow.com/questions/4057440/is-chrome-s-javascript-console-lazy-about-evaluating-objects on this behaviour ... — derpirscher, Mar 04 '23 at 21:55
So the real problem with your code is quite probably: something within your object is created by an async process you are not correctly awaiting ... Try debugging your code, set breakpoints at those locations and inspect the object. You will probably find, it's indeed empty — derpirscher, Mar 04 '23 at 21:58
@Redu well, sort of ... But the actual issue seems to happen before the `fetch` at stringifying the inputs for that `fetch` ... — derpirscher, Mar 05 '23 at 08:20

JSON.stringify() returns empty nested objects {} but works in console

0 Answers0