客户端JavaScript开发JSON编辑器生成有效JSON的问题排查

我正在开发一款JSON浏览/编辑器，目前已实现将初始JSON解析插入div元素并完成自定义格式渲染，遍历初始JSON所使用的函数代码如下：

_iterate(_tab, raw_json){
    var tab = _tab;
    tab++;

    for(var key1 in raw_json){
        var data_type = typeof raw_json[key1];
        var d = String(raw_json[key1])
        if(d == String){
           d = "String";
        }
        if(d == Number){
            d= "Number"
        }
        if(data_type == "object" || data_type == "array"){
            this.input.append(`<json-tab tab-width="${tab}"></json-tab><div class="json-editor-input-container-2 -je-${data_type}">'<span class="-je-key">${key1}</span>' :{</div></br>`)
            this._iterate(tab, raw_json[key1])
        }else{
            this.input.append(`<div class="json-editor-row"><json-tab tab-width="${tab}"></json-tab><div class="json-editor-input-container-2">'<span class="-je-key">${key1}<span>' : '<div class="json-editor-input -je-${data_type}" contenteditable="true" for="{key: \'${key1}\', data: \'${d}\'}"></div>', </div></br></div>`)
        }
    }
    
    this.input.append(`<json-tab tab-width="${tab -1}"></json-tab>},</br>`)
}

为了实现JSON保存功能，我计划通过如下方法从div的文本内容中提取JSON数据：

getJSON(){
    var json_text = this.input.text().slice(0, -1)
    return JSON.parse(`"${json_text}"`)
}

目前该输出内容可被JSON.parse()正常解析，但当执行console.log(getJSON()[0])时仅返回{，请问是否是JSON格式化环节存在问题？

核心问题定位 #

该现象不是JSON格式化环节的问题，核心错误出在getJSON的逻辑：
你把提取到的JSON文本外层额外套了一层双引号再传入JSON.parse，此时解析返回的结果不是JSON对象/数组，而是一个普通字符串。取[0]本质是读取字符串的第一个字符，自然只能得到{。

其他潜在问题 #

除此之外你的代码还有多处会导致后续功能异常的问题：

• typeof运算符对数组返回的结果是object，你写的data_type == "object" || data_type == "array"判断永远不会触发数组分支，所有数组都会被错误识别为对象渲染
• 渲染逻辑里不管对象还是数组都统一输出{作为起始符、}作为闭合符，数组对应的起始/闭合符应该是[]，生成的文本本身就不符合JSON格式规范
• 渲染时用了单引号包裹键名和值，标准JSON要求必须用双引号，且你生成的结构末尾会多出多余的逗号，直接解析原生文本一定会报错
• 直接读取this.input.text()会带入大量缩进、换行的空白字符，也会干扰解析

修复方案 #

优先推荐你放弃读取DOM文本提取JSON的方案：你每个可编辑元素的for属性已经存储了键名和初始值，还可以通过tab-width属性判断层级，直接遍历DOM节点按层级重建JSON对象，稳定性远高于文本解析。
如果一定要坚持文本解析方案，需要做两处修改：

1. 调整渲染逻辑，输出完全符合标准JSON规范的文本：区分对象和数组的包裹符号、使用双引号、去掉多余逗号
2. 修改getJSON逻辑，直接把处理干净的json_text传入JSON.parse，不要在外层额外套双引号：

getJSON(){
    var json_text = this.input.text().slice(0, -1).trim()
    return JSON.parse(json_text)
}

内容的提问来源于stack exchange，提问作者Nik Hendricks