使用客户端 JavaScript 生成完全有效的 JSON答案

【问题标题】：Generating fully valid JSON with client-side JavaScript使用客户端 JavaScript 生成完全有效的 JSON
【发布时间】：2021-08-27 19:10:09
【问题描述】：

所以我正在尝试创建一个 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。可以在here找到一个活生生的例子@

【问题讨论】：

也许先做一个 console.log("${json_text}") 并通过 JSON linter 在线运行...？

标签： javascript json parsing

【解决方案1】：

首先，您的console.log 结果没有意义。解析的 JSON 对象现在可以在 JavaScript 中使用，并且如果具有（仅）属性 x 和 y，则在请求属性 0 时会导致 undefined。看起来您对console.log 的调用是对getJSON() 函数的不同（早期？）版本，它返回原始字符串，在这种情况下，您只是检索第一个字符是有道理的JSON 文本："{"。

但是，假设 getJSON() 的版本是写的，它实际上会抛出一个解析异常：

VM1511:1 Uncaught SyntaxError: Unexpected token ' in JSON at position 1

查看您的网站，我可以在控制台中执行以下操作：

jsonString = $('json-editor').text()
// value: "{'partName' : '', 'partRevision' : '', ..."

那是非法的 JSON。 JSON 在其specification 的第 7 页上为字符串 (Unicode/ASCII 0x22) 指定（仅）引号 "。

'partName' 作为 JavaScript 字符串文字是合法的这一事实无关紧要，但可能令人困惑。

作为次要风格点，将JSON.parse(`"${json_text}"`) 简化为JSON.parse(json_text)。

【讨论】：

我已经对我的网站进行了一些更新，现在解析的更多内容除了 } 我猜在最后一个位置。我能做些什么来解决这个问题。感谢您的快速回复
SO 的格式表示封装的单个问题。所以你必须隔离，详细描述问题并发布一个单独的问题。尽可能减少示例输入，但仍然失败。

【解决方案2】：

@BaseZen 的回答对我了解我的代码出了什么问题非常有帮助。我的 JSON 格式不正确，即使在线 linter 说它是正确的。与 BaseZen 指出的一样，JSON.parse() 不适用于尾随逗号。要解决这个问题：

_remove_trailing_commas(json_string){
    var regex = /\,(?!\s*?[\{\[\"\'\w])/g;
    return json_string.replace(regex, '');
}

我在 SO 帖子 JSON Remove trailiing comma from last object 找到了此信息

SO 用户 Dima Parzhitsky 的回答也帮助我弄清楚了这个问题。

【讨论】：