在 JavaScript 中解析 JSON?

我想解析 JavaScript 中的 JSON 字符串。响应就像

var response = '{"result":true,"count":1}';

我如何获得数值result并从中进行count

答案

在 JavaScript 中解析 JSON 的标准方法是JSON.parse()

JSON API 是在ES5 (2011)中引入的,此后按市场份额和 Node.js 在超过 99%的浏览器中已实现。它的用法很简单:

const json = '{ "fruit": "pineapple", "fingers": 10 }';
const obj = JSON.parse(json);
console.log(obj.fruit, obj.fingers);

唯一无法使用JSON.parse()是,如果您正在为旧版浏览器进行编程,例如 IE 7(2006),IE 6(2001),Firefox 3(2008),Safari 3.x (2009)等。或者,您可能处于不包含标准 API 的深奥 JavaScript 环境中。在这些情况下,请使用JSON2.js ,这是 JSON 的发明者Douglas Crockford编写的 JSON 参考实现。该库将提供JSON.parse()的实现。

在处理极大的 JSON 文件时, JSON.parse()可能由于其同步特性和设计而感到窒息。为了解决这个问题,JSON 网站推荐了第三方库,例如Oboe.jsclarinet ,它们提供了流 JSON 解析。

jQuery 曾经有一个$.parseJSON()函数,但 jQuery 3.0 弃用了它。无论如何,很长一段时间以来,它只不过是JSON.parse()的包装。

警告!

这个答案源自一个古老的 JavaScript 编程时代,在那个时代没有内置的方法可以解析 JSON。此处给出的建议不再适用,可能很危险。从现代的角度来看,通过涉及 jQuery 或调用 eval()来解析 JSON 是胡说八道。除非您需要支持 IE 7 或 Firefox 3.0,否则解析 JSON 的正确方法是JSON.parse()

首先,您必须确保 JSON 代码有效。

之后,如果可以的话,我建议您使用 JavaScript 库,例如 jQuery 或 Prototype,因为这些库中的内容处理得很好。

另一方面,如果您不想使用库,并且可以保证 JSON 对象的有效性,则只需将字符串包装在匿名函数中,然后使用 eval 函数。

如果您从并非绝对受信任的其他来源获取 JSON 对象,则不建议这样做,因为 eval 函数会允许重新编写代码。

这是使用 eval 函数的示例:

var strJSON = '{"result":true,"count":1}';
var objJSON = eval("(function(){return " + strJSON + ";})()");
alert(objJSON.result);
alert(objJSON.count);

如果您控制使用的是哪种浏览器,或者您不担心使用较旧的浏览器,可以始终使用 JSON.parse 方法。

这确实是未来的理想解决方案。

如果您是从外部站点获得的,那么使用 jQuery 的 getJSON 可能会有所帮助。如果是列表,则可以使用 $ .each 遍历它。

$.getJSON(url, function (json) {
    alert(json.result);
    $.each(json.list, function (i, fb) {
        alert(fb.result);
    });
});

如果要对较旧的浏览器使用JSON 3 ,则可以有条件地通过以下方式加载它:

<script>
    window.JSON || 
    document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"><\/scr'+'ipt>');
</script>

现在,无论客户端运行哪种浏览器,都可以使用标准的window.JSON对象。

下面的示例将使其变得清晰:

let contactJSON = '{"name":"John Doe","age":"11"}';
let contact = JSON.parse(contactJSON);
console.log(contact.name + ", " + contact.age);

// Output: John Doe, 11

如果从 MVC @Viewbag 将带有双引号 '“” 的字符串变量(格式正确的 JSON 字符串)传递给 JSON.parse,则需要在 JSON.parse( jsonstring )之前进行处理。

var jsonstring = '@ViewBag.jsonstring';
    jsonstring = jsonstring.replace(/&quot;/g, '"');

您可以像其他一些答案一样使用 eval 函数。 (别忘了多余的花括号。)当您深入研究时,您会知道为什么),或者干脆使用 jQuery 函数parseJSON

var response = '{"result":true , "count":1}'; 
var parsedJSON = $.parseJSON(response);

要么

您可以使用以下代码。

var response = '{"result":true , "count":1}';
var jsonObject = JSON.parse(response);

您可以使用jsonObject.resultjsonObject.count访问这些字段。

使用parse()方法的最简单方法是:

var response = '{"a":true,"b":1}';
var JsonObject= JSON.parse(response);

这是如何获取值的示例:

var myResponseResult = JsonObject.a;
var myResponseCount = JsonObject.b;

JSON.parse()将传递给函数的所有 JSON 字符串转换为 JSON 对象。

为了更好地理解,请按F12打开浏览器的 “检查元素”,然后转到控制台以编写以下命令:

var response = '{"result":true,"count":1}'; // Sample JSON object (string form)
JSON.parse(response); // Converts passed string to a JSON object.

现在运行命令:

console.log(JSON.parse(response));

您将获得输出为 Object {result:true,count:1}。

为了使用该对象,您可以将其分配给变量,比如obj

var obj = JSON.parse(response);

现在,通过使用obj和 dot(。)运算符,您可以访问 JSON 对象的属性。

尝试运行命令

console.log(obj.result);

如果不使用库,则可以使用eval应该只使用一次。不过使用库更安全。

例如...

var response = '{"result":true , "count":1}';

var parsedJSON = eval('('+response+')');

var result=parsedJSON.result;
var count=parsedJSON.count;

alert('result:'+result+' count:'+count);