如何使用JavaScript读取JSON数据？解析无输出问题排查

问题描述 #

我从服务器获取到如下JSON数据：

{id: 1, no: "CP101", pack: "PH"}

尝试使用以下JavaScript代码读取：

var obj = JSON.parse('{id: 1, no: "CP101", pack: "PH"}');
document.getElementById("demo").innerHTML = obj.id + ", " + obj.no;

但未得到任何输出，请问该如何解决？

解决方案 #

嘿，这问题其实很常见——你传给JSON.parse()的字符串不符合标准JSON语法！JSON规范强制要求所有的键名必须用双引号包裹，而你代码里的id、no、pack这些键都没有引号，这会直接导致解析失败，代码执行到JSON.parse这一步就报错终止了，自然不会有后续的输出。

给你两种靠谱的修复方式：

1. 修正JSON字符串为标准格式 #

把所有键名加上双引号，改成符合规范的JSON字符串：

var obj = JSON.parse('{"id": 1, "no": "CP101", "pack": "PH"}');
document.getElementById("demo").innerHTML = obj.id + ", " + obj.no;

2. 直接使用对象字面量（如果不需要字符串解析） #

如果这段数据不是从外部获取的字符串，而是你直接写在代码里的，完全没必要调用JSON.parse，直接用JavaScript对象字面量就行：

var obj = {id: 1, no: "CP101", pack: "PH"};
document.getElementById("demo").innerHTML = obj.id + ", " + obj.no;

另外，给你个小技巧：遇到这类前端代码没输出的情况，记得打开浏览器开发者工具（按F12），切换到Console标签页，就能看到JSON.parse抛出的语法错误提示，这对快速排查问题超有用！

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