JS Fetch JSON 解析正在修改对象答案

【问题标题】：JS Fetch JSON parse is modifying objectJS Fetch JSON 解析正在修改对象
【发布时间】：2017-03-20 09:40:55
【问题描述】：

我在 fetch 中遇到过这种奇怪的行为。

首先看这个长度（正确）和实际结构的截图：console screenshot

考虑以下来自服务器的 json 响应，其中 likes 数组明显包含一个对象，comments 数组包含两个：

{
    "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
                }
            ]
        }
    }
}

现在，通过整个 response.json() 传递该响应，如下所示：

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)
})

得到以下结果：

{
    "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
                }
            ]
        }
    }
}

看看它是如何混淆likes 和comments 集合的。这让我现在快疯了。我错过了什么吗？

更新

这里的a gif showing chrome's console 列表显示了一个包含一个对象的数组，另一个包含两个对象的数组。当我单击前者时，它会变成一个包含两个对象的数组！这让我很困惑

【问题讨论】：

您在开发者工具网络选项卡中看到fetch 的响应 - 换句话说，来自您的服务器的实际响应
@JaromandaX 实际响应是问题的第一段代码
您意识到 GIF、屏幕截图、JSBin 和您在问题中输入的代码似乎都不同？很难提供帮助，因为我们无法重现您遇到的问题，而且您无法在可供我们公开查看的演示中重现该问题。
感谢您指出这一点。我实际上很难以公开的方式隔离问题。我在 jsbin 中放入的相同代码在我的应用程序中产生了不同（和奇怪）的结果，所以这可能意味着它与我的代码有关。我会继续从应用程序中删除内容，并在找到内容后立即更新问题。

标签： javascript json fetch

【解决方案1】：

好的，我发现它实际上是 lodash 的 _.merge() 在获取对象后改变了我的对象。我使用 lodash 根据 senderId 键合并两个集合（喜欢和 cmets）。

为了记录，我最终改用了这种方法：https://stackoverflow.com/a/35094948/1418038

【讨论】：