javascript | json解析

Question

我正在使用文件阅读器 API：

if (window.File && window.FileReader && window.FileList && window.Blob) {

} else {

    alert('The File APIs are not fully supported in this browser.');
    return;
}   

input = document.id('fileinput');

if (!input) {
    alert("Um, couldn't find the fileinput element.");
} else if (!input.files) {
    alert("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
    alert("Please select a file before clicking 'Load'");               
} else {
    file    = input.files[0];
    fr      = new FileReader();     
    fr.onload = function () {
        console.log(JSON.parse(fr.result));
    }

    fr.readAsText(file); 
}

我在控制台中得到了这个：

{"id":"2","name":"Links1","position":"1","author":"Demo","email":"info@demo.com","description":"","html":"<div class=\"units-row-end\" id=\"links\"><\/div>","css":"","js":"var out = '<a href=\"#!index\" class=\"home\">Home<\/a> ';\nout += user.type ? '<a href=\"#!logout\">Logout<\/a> ' : '<a href=\"#!login\">Login<\/a> ';\nout += user.type ==2 ? '<a href=\"#!admin?template=overview\">Account<\/a> ' : user.type == 1 ? '<a href=\"#!user?template=overview\">Account<\/a> ' : '';\nout += user.type !=2 ? '<a href=\"#!cart\">Cart<\/a>' : '';\n\ndocument.id('links').set('html', out);","status":"1"}

此输出不是我控制台中的对象！为什么？ 如果我试图将上面的字符串复制到：http://json.parser.online.fr/ 这个字符串将转换为对象。 哪里出了问题？

附言 我的文件内容（fr.result）：

"{\"id\":\"2\",\"name\":\"Links1\",\"position\":\"1\",\"author\":\"Demo\",\"email\":\"info@demo.com\",\"description\":\"\",\"html\":\"<div class=\\\"units-row-end\\\" id=\\\"links\\\"><\\\/div>\",\"css\":\"\",\"js\":\"var out = '<a href=\\\"#!index\\\" class=\\\"home\\\">Home<\\\/a> ';\\nout += user.type ? '<a href=\\\"#!logout\\\">Logout<\\\/a> ' : '<a href=\\\"#!login\\\">Login<\\\/a> ';\\nout += user.type ==2 ? '<a href=\\\"#!admin?template=overview\\\">Account<\\\/a> ' : user.type == 1 ? '<a href=\\\"#!useraccount?template=overview\\\">Account<\\\/a> ' : '';\\nout += user.type !=2 ? '<a href=\\\"#!cart\\\">Cart<\\\/a>' : '';\\n\\ndocument.id('links').set('html', out);\",\"status\":\"1\"}"

Answer 1

如果您的实际文件内容（如使用文本编辑器打开文件而不是使用 Firefox 控制台转储 fr.result 时所示）正是这样：

"{\"id\":\"2\",\"name\":\"Links1\",\"position\":\"1\",\"author\":\"Demo\",\"email\":\"info@demo.com\",\"description\":\"\",\"html\":\"<div class=\\\"units-row-end\\\" id=\\\"links\\\"><\\\/div>\",\"css\":\"\",\"js\":\"var out = '<a href=\\\"#!index\\\" class=\\\"home\\\">Home<\\\/a> ';\\nout += user.type ? '<a href=\\\"#!logout\\\">Logout<\\\/a> ' : '<a href=\\\"#!login\\\">Login<\\\/a> ';\\nout += user.type ==2 ? '<a href=\\\"#!admin?template=overview\\\">Account<\\\/a> ' : user.type == 1 ? '<a href=\\\"#!useraccount?template=overview\\\">Account<\\\/a> ' : '';\\nout += user.type !=2 ? '<a href=\\\"#!cart\\\">Cart<\\\/a>' : '';\\n\\ndocument.id('links').set('html', out);\",\"status\":\"1\"}"

...这解释了问题。

首先，您实际上没有有效的 JSON，因为任何JSON validator 都会显示。在 JSON 数据格式中，顶级元素必须是对象或数组，而您的元素是字符串。然而，JSON.parse() 方法显然允许 JSON 子元素的这些情况（可能是因为能够解码它们是一个有用且易于实现的功能）。

但是由于你只有一个字符串，所以解码后得到的就是一个字符串。就 JSON 而言，您的数据格式与此没有什么不同：

"Hello, World!"

我怀疑问题出在您用于生成 JSON 文件的代码中。看起来它正在对输出进行两次编码。它应该看起来像这样：

{"id":"2","name":"Links1","position":"1","author":"Demo","email":"info@demo.com","description":"","html":"<div class=\"units-row-end\" id=\"links\"><\/div>","css":"","js":"var out = '<a href=\"#!index\" class=\"home\">Home<\/a> ';\nout += user.type ? '<a href=\"#!logout\">Logout<\/a> ' : '<a href=\"#!login\">Login<\/a> ';\nout += user.type ==2 ? '<a href=\"#!admin?template=overview\">Account<\/a> ' : user.type == 1 ? '<a href=\"#!useraccount?template=overview\">Account<\/a> ' : '';\nout += user.type !=2 ? '<a href=\"#!cart\">Cart<\/a>' : '';\n\ndocument.id('links').set('html', out);","status":"1"}

请注意，前导引号和尾引号已消失（连同所有反斜杠转义序列在内）。这样一来，您就有了一个编码的对象，也得到了一个解码的对象。

Answer 2

有两种方式：

1. 重写你的文件（就像一个明显的 js 文件）： {"id":"2","name":"Links1","position":"1", ...

2. 如果您无法更改文件，请使用此技巧：

   fr.onload = 函数 () {

   eval('var temp = ' + fr.result + ';');

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

   }