JS Fetch JSON parse is modifying object

Question

I've come across this weird behavior from fetch.

First look at this screenshot of the lengths (which are correct) and actual structures: console screenshot

Consider the following json response from a server, where the likes array clearly contains one object, and the comments array contains two:

{
    "status":"success",
    "payload":{
        "272699880986":{
            "likes":[
                {
                    "createdTime":"2016-11-07T04:41:21.000Z",
                    "senderId":10209615042475034,
                    "senderName":"Alfredo Re",
                    "likes":1
                }
            ],
            "comments":[
                {
                    "createdTime":"2016-11-07T04:41:54.000Z",
                    "senderId":1021426764639564,
                    "senderName":"Alfredo J. Re",
                    "comments":1
                },
                {
                    "createdTime":"2016-11-07T04:41:24.000Z",
                    "senderId":10209615042475034,
                    "senderName":"Alfredo Re",
                    "comments":1
                }
            ]
        }
    }
}

Now, passing that response through the whole response.json(), like this:

fetch('http://example.com/entries.json', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        ...authKeys,
    }
})
.then(response => {
    switch(response.status){
        case 200:
            console.log('status 200', response)
            return response.json()
    }
})
.then(json => {
    console.log('parsed response')
    console.log(json)
})

Gets me the following result:

{
    "status":"success",
    "payload":{
        "272699880986":{
            "likes":[
                {
                    "createdTime":"2016-11-07T04:41:54.000Z",
                    "senderId":1021426764639564,
                    "senderName":"Alfredo J. Re",
                    "likes": 1,
                    "comments":1
                },
                {
                    "createdTime":"2016-11-07T04:41:24.000Z",
                    "senderId":10209615042475034,
                    "senderName":"Alfredo Re",
                    "comments":1
                }
            ],
            "comments":[
                {
                    "createdTime":"2016-11-07T04:41:54.000Z",
                    "senderId":1021426764639564,
                    "senderName":"Alfredo J. Re",
                    "comments":1
                },
                {
                    "createdTime":"2016-11-07T04:41:24.000Z",
                    "senderId":10209615042475034,
                    "senderName":"Alfredo Re",
                    "comments":1
                }
            ]
        }
    }
}

See how it mixed up the likes and comments collections. This is driving me insane right now. Am I missing something?

UPDATE

Here's a gif showing chrome's console listing showing and array containing one object, and another one containing two objects. When I click the former, it turns into an array with two objects! This baffles me

what response do you see in the developer tools network tab for that `fetch` - in other words, the actual response from your server — Jaromanda X, Nov 07 '16 at 05:47
@JaromandaX the actual response is the first piece of code at the question — Alfredo Re, Nov 07 '16 at 06:10
You realise that the GIF, the screenshot, the JSBin and the code you've put in your question all seem to differ? It's difficult to help because we cannot reproduce the issue you're experiencing, and you can't reproduce the issue in a publicly viewable demo for us. — AM Douglas, Nov 07 '16 at 07:26
Thanks for pointing that out. I'm actually having a hard time trying to isolate the issue in a publicly available way. The same code I've put in jsbin produces different (and weird) results inside my app, so that probably means it's something else about my code. I'll keep removing stuff from the app and update the question as soon as I find something. — Alfredo Re, Nov 07 '16 at 07:38

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

Ok, I figured out it was actually lodash's _.merge() mutating my objects way after fetching them. I was using lodash to merge the two collections (likes and comments) based on the senderId key.

Just for the record, I ended up using this method instead: https://stackoverflow.com/a/35094948/1418038

edited May 23 '17 at 10:32

Community

1
1

answered Nov 07 '16 at 16:48

Alfredo Re

122
7

JS Fetch JSON parse is modifying object

1 Answers1