使用 Javascript 解析格式错误的 JSON

Question

我想使用 Javascript 解析此内容。数据如下：

{"ss":[["星期四","7:00","决赛",,"BAL","19","ATL","20",,,"56808",,"PRE4 “，”201 5"],["星期四","7:00","决赛",,"否","10","GB","38",,,"56809",,"PRE4","2015" ]]}

每个在线教程都会教你如何使用 Twitter 解析 JSON，但我不太确定 JSON 解析是如何工作的。

我想在一个网站上设置这个来查看 NFL 球队的得分，这是一个有趣的项目，也是一个关于解析 JSON 的良好学习体验，因为我不太关心 Twitter 的东西。

这可能吗？有什么好的入门教程吗？甚至一些起始代码？

Answer 1

一般来说，您可以使用 JSON.parse 来执行此操作。但是，您拥有的该片段似乎并不是严格有效的 JSON（如下所示： http://jsfiddle.net/ yK3Gf/ 并在此处验证源 JSON：http://jsonlint.com/）。

因此，您要么需要手动解析它，要么让 nfl.com 修复他们的 JSON。

作为替代方案，它们的 JSON 在使用 eval() 时确实解析成功，因此您可以使用以下内容解析它：

var parsedData = eval('(' + jsonData + ')');

...如下所示： http://jsfiddle.net/yK3Gf/1/

不过请注意，以这种方式解析 JSON 通常会受到反对（特别是当正在解析的数据正在被解析时）。由一个交付第三方源），因为如果数据中碰巧包含任何可执行代码，您就会遭受 XSS 攻击。

Answer 2

我处于类似的位置 - 非 javascript 专家，致力于一个有趣的项目，以熟悉 javascript、ajax 和 json。

我采取了三个不同的步骤来处理这个问题。我欢迎任何有关改进解决方案的反馈。

第一步是查询 nfl 网站以获取分数。由于 json 的来源（nfl 站点）与您的站点不同，因此您必须解决针对跨域查询的 javascript 安全限制。我发现这个 stackoverflow 链接 是一个很好的参考。我使用 JSONP 作为解决方法。我使用 http://whateverorigin.org/ 作为间接站点。

$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://www.nfl.com/liveupdate/scorestrip/scorestrip.json') + '&callback=?', handleQueryForScoresResult);

正如其他人指出的那样，nfl 网站返回无效的 json 数据。以下示例行说明了该问题：

["周日","4:25","决赛",,"十","7","分钟","30",,,"55571",,"REG5","2012"] ,

注意空数组元素值（重复的逗号，中间没有数据）。因此，在我的 json 回调函数中，我通过在调用 jquery 解析 json 数据之前向重复的逗号添加空字符串（两个双引号）来更正数据：

function handleQueryForScoresResult(data) {
    var jsonStr = data.contents;
    jsonStr = jsonStr.replace(/,,/g, ',"",');
    jsonStr = jsonStr.replace(/,,/g, ',"",');

    var scoresData = jQuery.parseJSON(jsonStr).ss;
    .
    .
    .
}

最后，我创建了 GameScores 对象来封装 json 数据。

function GameScore(scoreData) {
    this.scoreData = scoreData;
    scoreData[2] = scoreData[2].toLowerCase();
    scoreData[5] = parseInt(scoreData[5]);
    scoreData[7] = parseInt(scoreData[7]);
} 

function GameScore_getAwayTeam() { return this.scoreData[4]; }
function GameScore_getHomeTeam() { return this.scoreData[6]; } 
function GameScore_isFinal() { return this.scoreData[2]=="final"; }  
function GameScore_getHomeTeamScore() { return this.scoreData[7]; }
function GameScore_getAwayTeamScore() { return this.scoreData[5]; }
function GameScore_doesHomeTeamLead() { return this.scoreData[7]> this.scoreData[5]; }
function GameScore_doesAwayTeamLead() { return this.scoreData[5]> this.scoreData[7]; }
function GameScore_getWeekId() { return this.scoreData[12]; }

GameScore.prototype.getHomeTeam = GameScore_getHomeTeam;
GameScore.prototype.getAwayTeam = GameScore_getAwayTeam;
GameScore.prototype.isFinal = GameScore_isFinal;
GameScore.prototype.getHomeTeamScore = GameScore_getHomeTeamScore;
GameScore.prototype.getAwayTeamScore = GameScore_getAwayTeamScore;
GameScore.prototype.doesHomeTeamLead = GameScore_doesHomeTeamLead;
GameScore.prototype.doesAwayTeamLead = GameScore_doesAwayTeamLead;
GameScore.prototype.getWeekId = GameScore_getWeekId;

我只添加了一些访问器，因为我不需要大部分数据。您的需求可能会有所不同。

Answer 3

我们使用 mootools 来完成类似的事情，但你也可以用纯 JavaScript 来完成：http://www.json.org/js.html。

Answer 4

假设您已经有一个要解析的有效 JSON String (jsonString)。 （如果您不知道如何检索 String 以使用 XMLHttpRequest 从给定的 url 进行解析，您必须首先研究它。）

---

使用纯 JavaScript，您将拥有添加 Douglas Crockford 的 JSON 库（或类似的库），以便在没有本机实现的情况下提供解析函数：

var json = json_parse(jsonString) ;

• 链接

---

使用像 jQuery 这样的 JavaScript 库现在

var json = $.parseJSON(jsonString) ;

---

，遍历生成的 JSON Object 是一个完全不同的问题，因为您必须先知道它的结构，然后才能检索特定数据。
在这种特殊情况下——如果它确实格式良好——您将必须执行以下操作：

var data = json.ss ;

     for(var i = 0 ; i < data.length ; i++) {

          var entry = data[i] ;

          var day = entry[0] ; //!! the Arrays seem to have a format where the first entry always contains the data and so forth...
          /* ... */

          // then do something with the data bits

     }

Answer 5

您的主要问题是，根据 RFC 4627，您引入的 JSON 格式错误或无效。

您可以做的是获取 JSON 数据的副本并使用此工具对其进行格式化 http://www.freeformatter.com/json-formatter.html

获得格式化版本后，您可以使用 jQuery ajax 调用

$.ajax({
    url: "your-formatted.json",
    dataType: 'json',

    success: function (data) {

        for (var i = 0; i < data.ss.length; i++) {
            document.write("Day: " + data.ss[i][0]);
            document.write("<br/>");
            document.write("Time: " + data.ss[i][1]);
            document.write("<br/><br/>");
        }
    }
});

您实际上不应该在您的应用程序中使用 document.write 。这仅用于显示数据的示例目的。

Answer 6

对于这个特定问题（来自 JSON 响应的数组中的空索引），我使用前瞻断言进行了正则表达式替换。考虑到请求包含 XMLHttpRequest：

request.responseText.replace(/,(?=,)/gm, ",\"\"")

这会将 ,, 转换为 ,"",，并且在序列中有更多逗号的情况下也可以工作，因此 ,,, 变为 ,"","",。之后您可以使用 JSON.parse() 。

Answer 7

这个格式错误的 JSON 可以由 dirty-json NPM 包解析（我是作者）。

您可以在此处测试解析器的演示：https://rmarcus.info/dirty-json

解析器将原始问题中的 JSON 解释为相当于以下有效的 JSON：

{
    "ss": [
        [
            "Thu",
            "7:00",
            "Final",
            "BAL",
            "19",
            "ATL",
            "20",
            "56808",
            "PRE4",
            "2015"
        ],
        [
            "Thu",
            "7:00",
            "Final",
            "NO",
            "10",
            "GB",
            "38",
            "56809",
            "PRE4",
            "2015"
        ]
    ]
}