11、JSON.parse 数据不完整

最新推荐文章于 2024-08-12 14:44:05 发布
最新推荐文章于 2024-08-12 14:44:05 发布
阅读量1.8k 收藏
点赞数
分类专栏： 异常集 文章标签： JSON.parse JSON.parse 不完整 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yandype/article/details/131815533
版权
一、问题描述

使用 JSON.parse 反序列化，出现数据丢失现象。

字符串json数据：

{
    "varImageList": [
        {
            "variationValue": "Black ",
            "imageList": [
                {
                    "variationValue": "Black ",
                    "image_base64": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAB/20210713_11ca63ca7457a70070587ee7f2b30e1b.jpg",
                    "image_url": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAB/20210713_11ca63ca7457a70070587ee7f2b30e1b.jpg",
                    "imageAddress": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAB/20210713_11ca63ca7457a70070587ee7f2b30e1b.jpg",
                    "image_address": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAB/20210713_11ca63ca7457a70070587ee7f2b30e1b.jpg",
                    "type": "image/jpeg"
                }
            ]
        },
        {
            "variationValue": "Gray ",
            "imageList": [
                {
                    "variationValue": "Gray ",
                    "image_base64": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/20211124_4559fbad3a4e4b5c3a8b2383135334a6.jpg",
                    "image_url": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/20211124_4559fbad3a4e4b5c3a8b2383135334a6.jpg",
                    "imageAddress": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/20211124_4559fbad3a4e4b5c3a8b2383135334a6.jpg",
                    "image_address": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/20211124_4559fbad3a4e4b5c3a8b2383135334a6.jpg",
                    "type": "image/jpeg"
                }
            ]
        },
        {
            "variationValue": "Brown ",
            "imageList": [
                {
                    "variationValue": "Brown ",
                    "image_base64": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAR/20210713_885a0dd07f764f10f8d4e565db4f215d.jpg",
                    "image_url": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAR/20210713_885a0dd07f764f10f8d4e565db4f215d.jpg",
                    "imageAddress": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAR/20210713_885a0dd07f764f10f8d4e565db4f215d.jpg",
                    "image_address": "https://b2bfiles1.gigab2b.cn/image/wkseller/8658/WF212761AAR/20210713_885a0dd07f764f10f8d4e565db4f215d.jpg",
                    "type": "image/jpeg"
                }
            ]
        }
    ]
}

JSON.parse 序列化后结果：

{
    "varImageList": [
        {
            "variationValue": "Black",
            "imageList": []
        },
        {
            "variationValue": "Gray",
            "imageList": []
        },
        {
            "variationValue": "Brown",
            "imageList": []
        }
    ]
}

imageList 数据丢失。

使用 eval 反序列化，数据正常；

var json = eval('(' + strJson + ')');
二、产生原因

这是因为  JSON.parse 对 json字符串数据要求比较严格。像上面数据丢失原因，就是因为属性值后缀有空字符导致的。使用 trim() 方法去除两边空字符即可；

浅谈JSON.parse()和JSON.stringify()
10-23
JSON.parse() 和 JSON.stringify() 是JavaScript中用于处理JSON数据的两个重要方法。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它们常被用于...
深入剖析 JavaScript 中的 JSON.stringify 和 JSON.parse
09-15
JavaScript 内置的 JSON.stringify 和 JSON.parse 方法，为开发者提供了便捷的JSON数据序列化和反序列化能力。本文将深入探讨这两个方法的工作原理、使用场景以及一些高级技巧。 JSON.stringify 和 JSON.parse 是 ...
JSON.parse()反序列化数据丢失
flhhly的博客
05-11 781
序列化：将数据转换为字符串的过程称为序列化。在序列化过程中，数据结构（比如对象、数组等）被转换成一个字符串形式，这个字符串通常以特定的格式表示，比如 JSON 或 XML。反序列化：反序列化是序列化的逆过程，它将之前序列化得到的字符串重新转换回原始的数据结构。这样就可以从字符串中恢复出原始的数据对象。在 JavaScript 中，方法用于序列化 JavaScript 对象为 JSON 字符串，而方法用于将 JSON 字符串解析为对应的 JavaScript 对象。
JSON.parse(JSON.string(arr))丢失对象问题
07-31 2926
** 当用JSON实现深拷贝JSON.parse(JSON.stringify(test))的时候，你会发现： ** 1、new Date(1536627600000) 只是字符串的形式。而不是时间对象； 2、new RegExp(’\w+’) || error 序列化的结果将只得到空对象； 3、obj里有函数 序列化的结果会把函数或 undefined丢失 4、NaN、Infinity和-Infinity 序列化的结果会变成null 5、对象是有构造函数生成的，会丢弃对象的constructor 6、如
使用JSON.parse()导致数字精度丢失
LovelyLittleCub的博客
08-12 879
安装 npm install json-bigint。使用json-bigint。
JSON.parseObject 部分值丢失
weixin_43837329的博客
07-27 1880
又是一个风和日丽的挖坑下午，接口编写好后，运行，查看日志，咦，我新加的值没有写进去！！！
JSON.parse导致数字精度丢失末尾变成0问题解决方案
qq_37325838的博客
02-29 6420
在写一个JSON预览小工具时发现JSON.parse遇到超长数字时会导致精度丢失，超出了安全范围之后的数会被替换为0，比如。其实解决方法很简单，只需要引入json-bigint库进行parse即可。完成如上操作，超出安全范围的数字即可被转换为字符串正常显示了。step2.使用json-big进行parse。step1.引入json-bigint。在JSON.parse之后会被变成。
javascript JSON.parse解析双引号嵌套单引号格式的数据
01-07
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。 >str1 = {'distance': 1, 'update_time': 'None', 'n_homalt_N_het': '13/3822', 'ratio': '-', 'quality': '451'} {'distance': 1, 'update_time': 'None', '...
JSON.parse 解析字符串出错的解决方法
01-19
经查，原来是json数据的格式要求非常严格，属性名称必须是用双引号“”括起来。 代码如下: var a=JSON.parse(‘{“a”:”aaaaa”}’);//正确 var a=JSON.parse(“{‘a’:’aaaaa’}”);//错误
使用JSON.parse将json字符串转换成json对象的时候会出错
01-19
在对数据库取出来的数据（特别是描述信息）里面含有特殊字符的话，使用JSON.parse将json字符串转换成json对象的时候会出错，主要是双引号，回车换行等影响明显，左尖括号和右尖括号也会导致显示问题，所以要在输出到...
JSON.parse(JSON.stringify())导致的响应式属性丢失
Zing_ing的博客
06-24 537
【代码】JSON.parse(JSON.stringify())导致的响应式属性丢失。
JSON.parse()的异常怎么处理；
weixin_34162695的博客
03-23 1581
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <scrip...
@ResponseBody返回json时，json数据丢失或者报错
weixin_44988848的博客
07-31 1200
现象： 1.报错：There is a cycle in the hierarchy! 2.返回至前台的json不完整，字段丢失。 错误原因： eg:entity1的属性有list，entity2的字段中也含有entity1,即常见的双向关联;引发的死循环 解决方案： 1.重写一个实体类用于传输json 2.@JsonIgnore 转载https://www.cnblogs.com/peak-c/p/5360481.html ...
当一个json存在id 和_id 的时候，使用JSONObject.parseObject进行序列号操作，映射错误
伟大是熬出来的
01-25 768
FastJson默认会将Java对象中的下划线风格的字段名转换为驼峰风格的属性名。如果你想保留原始的下划线风格的字段名，可以在对应的字段上添加。属性为下划线风格的字段名。
JSON.parse处理非标准Json数据出错
六耳石猴的博客
08-06 1556
标准json格式 通常我们在编码中使用的object是类似于下面这种： let object = { key1: 'value1', key2: 'value2', ... } 这样的对象在代码中键是不需要用引号括起来的。但是标准Json的格式应该是如下: { "key1": "value1", "key2": "value2", ... } 键值都需要用双引号括起来（不能用单引号）。 有时候后台传给前台的数据被转成了字符串形式，并且是各种不标准的json格式，这时候js中使用JSON.pa
【HarmonyOS NEXT】JSON.parse解析返回的数据json有误
Mayism123的博客
04-08 1237
这是由于JavaScript使用的IEEE 754标准双精度浮点数表示，它有53位的精度，JSON.parse函数在解析大整数时可能会出现超出了JavaScript的Number类型所能表示的范围，造成精度丧失，导致尾数变为0。json解析时，数据model定义的number取某字段的2308543339213693963，自行转换成了2308543339213694000。json / 解析 / 数据。
使用FastJson parseObject方法时,json字符串解析成对象后,部分属性丢失问题处理
腾龙凌九霄
10-14 8964
出现此类问题的原因会有多种, 本文仅介绍发现的一种情况,不一定适用所有的场景 情景: 　　JavaBean 中没有默认的构造方法 例如: public class Student{ public static void main(String[] args) { String jsonStr = "{\"id\":1,\"name\":\"Ming\",\"age\":18,\"phone\":\"23333333333\",\"address\"...
JSON.parse() 全面用法介绍
大剑师兰特的GIS世界
06-20 3520
JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用方法将数据转换为 JavaScript 对象。
value.annex = value.invoice ? this.processPictures( value.invoice ) : [] //处理附件 this.formData.oaClaimDetailList[ this.index ].claimAmount = value.applyAmount.toString() //处理报销金额 this.formData.oaClaimDetailList[ this.index ].annex = JSON.parse( JSON.stringify( value.annex ) ) this.formData.oaClaimDetailList[ this.index ].remarks = '' this.formData.oaClaimDetailList[ this.index ].applyAmount = JSON.parse( JSON.stringify( value.applyAmount ) ) this.formData.oaClaimDetailList[ this.index ].applyTime = JSON.parse( JSON.stringify( value.applyTime ) ) this.formData.oaClaimDetailList[ this.index ].applyTimeSearch = JSON.parse( JSON.stringify( value.applyTimeSearch ) ) this.formData.oaClaimDetailList[ this.index ].businessId = JSON.parse( JSON.stringify( value.businessId ) ) this.formData.oaClaimDetailList[ this.index ].businessType = JSON.parse( JSON.stringify( value.businessType ) ) this.formData.oaClaimDetailList[ this.index ].claimId = JSON.parse( JSON.stringify( value.claimId ) ) this.formData.oaClaimDetailList[ this.index ].claimState = JSON.parse( JSON.stringify( value.claimState ) ) this.formData.oaClaimDetailList[ this.index ].createBy = JSON.parse( JSON.stringify( value.createBy ) ) this.formData.oaClaimDetailList[ this.index ].createTime = JSON.parse( JSON.stringify( value.createTime ) ) this.formData.oaClaimDetailList[ this.index ].deptId = JSON.parse( JSON.stringify( value.deptId ) ) this.formData.oaClaimDetailList[ this.index ].endTime = JSON.parse( JSON.stringify( value.endTime ) ) this.formData.oaClaimDetailList[ this.index ].flag = JSON.parse( JSON.stringify( value.flag ) ) this.formData.oaClaimDetailList[ this.index ].id = JSON.parse( JSON.stringify( value.id ) ) this.formData.oaClaimDetailList[ this.index ].invoice = JSON.parse( JSON.stringify( value.invoice ) ) this.formData.oaClaimDetailList[ this.index ].params = JSON.parse( JSON.stringify( value.params ) ) this.formData.oaClaimDetailList[ this.index ].processInstanceId = JSON.parse( JSON.stringify( value.processInstanceId ) ) this.formData.oaClaimDetailList[ this.index ].processName = JSON.parse( JSON.stringify( value.processName ) ) // this.formData.oaClaimDetailList[ this.index ].relatedClaim = JSON.parse( JSON.stringify( value.relatedClaim ) ) this.formData.oaClaimDetailList[ this.index ].relationId = JSON.parse( JSON.stringify( value.relationId ) ) this.formData.oaClaimDetailList[ this.index ].remark = JSON.parse( JSON.stringify( value.remark ) ) this.formData.oaClaimDetailList[ this.index ].searchValue = JSON.parse( JSON.stringify( value.searchValue ) ) this.formData.oaClaimDetailList[ this.index ].startTime = JSON.parse( JSON.stringify( value.startTime ) ) this.formData.oaClaimDetailList[ this.index ].state = JSON.parse( JSON.stringify( value.state ) ) this.formData.oaClaimDetailList[ this.index ].tenantId = JSON.parse( JSON.stringify( value.tenantId ) ) this.formData.oaClaimDetailList[ this.index ].updateBy = JSON.parse( JSON.stringify( value.updateBy ) ) this.formData.oaClaimDetailList[ this.index ].updateTime = JSON.parse( JSON.stringify( value.updateTime ) ) this.formData.oaClaimDetailList[ this.index ].userId = JSON.parse( JSON.stringify( value.userId ) ) 代码优化
最新发布
03-11
从你提供的代码片段来看，这段JavaScript代码的主要功能是对`this.formData.oaClaimDetailList[this.index]`对象的属性进行赋值操作，并且大量使用了深拷贝的方式来避免引用类型的直接赋值导致的问题。为了提高代码的可读性和效率，我们可以对其进行一些优化： ### 1. 减少重复的 `JSON.parse(JSON.stringify())` 这种做法虽然可以实现深度复制的效果，但对于大多数情况来说过于繁琐和低效，尤其是对于大型复杂的数据结构可能会造成性能瓶颈。 #### 改进建议： - 如果只是简单地复制基本数据类型（如字符串、数字等），可以直接赋值。 - 对于复杂的嵌套对象或数组，考虑引入专门用于深层克隆的对象工具函数库，例如Lodash的_.cloneDeep()方法；也可以编写自定义浅层/深层克隆函数。 ```javascript const cloneDeep = obj => { if (obj === null || typeof obj !== 'object') return obj; const result = Array.isArray(obj) ? [] : {}; for (let key in obj){ result[key] = cloneDeep(obj[key]); } return result; }; ``` 然后用这个简单的辅助函数替换掉所有的`JSON.parse(JSON.stringify(...))`。 ### 2. 使用解构赋值简化批量设置属性 通过ES6+语法特性中的**解构表达式**能够让我们更简洁优雅地完成这项任务。 ```javascript // 假设我们有一个包含所有需要更新字段的对象value const { applyAmount, invoice, ...rest } = value; // 更新附件信息 value.annex = value.invoice ? this.processPictures(value.invoice) : []; // 批量给formData中的指定位置元素添加新属性或者覆盖现有属性 Object.assign(this.formData.oaClaimDetailList[this.index], rest); // 特殊处理某些特定字段 this.formData.oaClaimDetailList[this.index].claimAmount = applyAmount.toString(); this.formData.oaClaimDetailList[this.index].annex = cloneDeep(value.annex); this.formData.oaClaimDetailList[this.index].applyAmount = +applyAmount; // 转换回数值型 ``` 这样做不仅减少了冗余代码行数，也使得逻辑更加清晰明了。 ### 总结一下改进后的版本： ```javascript function deepClone(obj) {/* 上述提到过的递归深拷贝算法 */} // 简化并优化后的代码段开始... { let targetItem = this.formData.oaClaimDetailList[this.index]; Object.keys(targetItem).forEach((key)=>{ if(key!=='annex'&&key!=='claimAmount'){ targetItem[key]=deepClone(value[key]) } }); // 单独处理特殊规则的两个字段 targetItem.claimAmount=String(value.applyAmount); targetItem.annex=value.invoice?this.processPictures(value.invoice):[]; } ``` 这样做的目的是让我们的程序变得更容易维护的同时保持较高的运行效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值