V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Romanticlizhi
V2EX  ›  程序员

怎么将格式化后的 json 展示到前端界面,并且格式不被破坏

  •  
  •   Romanticlizhi · 2017-07-05 16:17:37 +08:00 · 3815 次点击
    这是一个创建于 2700 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如一串 json 格式为{"name":"HTL","sex":"男","age":"24"},格式化后为以一个键值对占一行的格式,总共三行。此时我想要在前台页面展示格式化后的数据格式。我现在的做法是:写了一个格式化 json 的函数,将格式化后的数据保存在一个变量中,然后前台是将数据放在 span 标签中。现在我有主要几个问题无法解决:

    1. 怎么将变量的值赋给 span (重要!)
    2. span 会不会破坏格式化后的数据格式
    3. 前端有什么标签不会破坏数据格式
    4. 有木有哪位大神指点一个更加好的方法拯救我吧,在此谢过啦!!!很急!!杭州的可以面对面交流!!
    第 1 条附言  ·  2017-07-05 17:06:47 +08:00
    解释一下:因为前端用的 eazyUI 这个框架,所以我的内容是默认被放在了 span 里面 ,结构大致是<dd>里面装了一个<span>,所以我现在要把这个 span 移除,最恶心的是 span 还被这个框架搞了各种样式在里面!!恶心到我了!我的大致逻辑是:
    ```
    var $forminput = $infoForm.find("*[ui-name = c_content]");
    var $parent = $forminput.parent(); //得到标签<dd>
    var json = $forminput.text();
    var formatjson = JSON.stringify(json1, null, '\t') ;//得到格式化后的 json
    var $pre = document.createElement("pre");
    $pre.innerHTML = formatjson;
    $parent.removeChild("span");
    $parent.appendChild("pre");
    ```
    并不行,报错$parent.removeChild is not a function,为什么呀?
    13 条回复    2017-07-06 15:21:17 +08:00
    cliberal
        1
    cliberal  
       2017-07-05 16:20:44 +08:00 via iPhone
    为啥要放 span 里,直接将格式化后的数据放 pre 里不行么
    vankid
        2
    vankid  
       2017-07-05 16:21:38 +08:00
    用 html 标签<br>换行就可以,span 赋值直接$("选择符").html(json);
    vankid
        3
    vankid  
       2017-07-05 16:25:53 +08:00
    如果你不想改写好的格式化工具,那就 json.replace("\n","<br/>");然后传到前台$("选择符").html(json)
    Romanticlizhi
        4
    Romanticlizhi  
    OP
       2017-07-05 16:28:21 +08:00
    @vankid 好坑,网上查出一大堆用.innerHTML(),innerText()等等都不行,就是没有.html(),可怜我这个做 Java 的后端了,非常感谢!!!
    seancheer
        5
    seancheer  
       2017-07-05 16:28:57 +08:00
    <pre>标签不会破坏格式。。。顺带,楼主你头像让人耳目一新
    Romanticlizhi
        6
    Romanticlizhi  
    OP
       2017-07-05 16:38:22 +08:00
    @vankid 为啥 json.replace(",","<br/>");只有第一行的键值对后面的逗号被替换了。。。。
    ijse
        7
    ijse  
       2017-07-05 16:47:09 +08:00
    ```
    const formatedJSON = JSON.stringify(data, null, '\t')
    ```
    然后把它放到<pre>中就好了。
    ijse
        8
    ijse  
       2017-07-05 16:49:34 +08:00
    const $pre = document.createElement('pre')
    $pre.innerHTML = formatedJSON
    document.querySelector('span').appendChild($pre)
    KeepPro
        9
    KeepPro  
       2017-07-05 16:51:43 +08:00 via Android
    女装大佬连这都解决不了了么 233
    FlowerChen
        10
    FlowerChen  
       2017-07-05 17:03:44 +08:00
    用个循环一个个读出来,放到你要的 DOM 里面,比如 table 里面
    Romanticlizhi
        11
    Romanticlizhi  
    OP
       2017-07-05 17:07:27 +08:00
    @ijse 感谢了,但是,请看 append!
    vankid
        12
    vankid  
       2017-07-06 15:17:10 +08:00
    @Romanticlizhi 我也是个 java 后端啊。。。
    vankid
        13
    vankid  
       2017-07-06 15:21:17 +08:00
    @Romanticlizhi javascript 是这样子啦,你搜下 replaceAll,有很多写好的方法的。或者你在后台用 java 里的 replace 换
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3518 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:19 · PVG 19:19 · LAX 03:19 · JFK 06:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.