前端转换嵌套的json数据报错

一时失言乱红尘 2021-09-29 11:48 482阅读 0赞

一、问题说明

通常情况下，我们遇到的都是比较简单的json格式，如：

{"aa":"11","bb":"22"}

![2019071120131961.png][]

我碰到过一个稍微复杂点的json格式，如：

{"params":"{\"name\":\"zhangsan\",\"id\":\"101\",\"token\":\"123456\"}"}

这里说下，我的目标是解析成这种形式 算ok

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70][]

看到上面这个格式，有人会有疑问，这是标准的json数据格式吗？当然不是，因为前端其实是解析不了的。我为什么要这样表达这个格式呢？因为我造的数据，打印的结果就是这样，我先贴过来，代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 1][]

我的前端代码中接到的是下面这样的数据，看上去似乎是正常的json格式，但是依然无法正常解析

![20190716205911321.png][]

二、解决问题

这里要用到commons.lang3里的一个方法：**StringEscapeUtils.escapeJson**（用来对json字符串进行转义）

回到前面的问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 2][]

{\"params\":\"{\\\"name\\\":\\\"zhangsan\\\",\\\"id\\\":\\\"101\\\",\\\"token\\\":\\\"123456\\\"}\"}

我们把转义后的结果放到chrome控制台再试下，发现解析成功了

![2019071621265591.png][]

参考链接：[https://blog.csdn.net/chenleixing/article/details/43456987][https_blog.csdn.net_chenleixing_article_details_43456987]

附测试数据生成代码：

import net.sf.json.JSONObject;
    import org.apache.commons.lang3.StringEscapeUtils;
    import java.util.HashMap;
    import java.util.Map;
    
    public class MyTest {
    	public static void main(String[] args) {
    		JSONObject jsonObject = new JSONObject();
    		jsonObject.element("id", "101");
    		jsonObject.element("name", "zhangsan");
    		jsonObject.element("token", "123456");
    		Map<String, String> params = new HashMap<>();
    		params.put("params", jsonObject.toString());
    
    		String paramStr = JSONObject.fromObject(params).toString();
    		System.out.println(paramStr);
    
    		paramStr = StringEscapeUtils.escapeJson(paramStr); // 转义
    		System.out.println(paramStr);
    	}
    }

[2019071120131961.png]: /images/20210923/06011629381743298e9cf64eebfcf7dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70]: /images/20210923/3634fdbe297d4c91b6fd942c4dcae65a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 1]: /images/20210923/5fdde40fa22d4ed5866b287f6f4c374b.png
[20190716205911321.png]: /images/20210923/36a884c82b47482d963b8d67d9ec696c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 2]: /images/20210923/8cdaddf17ce2458293c41d8e223d948c.png
[2019071621265591.png]: /images/20210923/67162ebbe5504056bfd470d7adc6b395.png
[https_blog.csdn.net_chenleixing_article_details_43456987]: https://blog.csdn.net/chenleixing/article/details/43456987