javascript | json parse

Question

I'm using filereader 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); 
}

I'm getting this in my console:

{"id":"2","name":"Links1","position":"1","author":"Demo","email":"[email protected]","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"}

This output is not an object in my console! Why? If I'm trying to copy the string above and past into: http://json.parser.online.fr/ this string converts into object. Where is a problem?

P.S My file contents (fr.result):

"{\"id\":\"2\",\"name\":\"Links1\",\"position\":\"1\",\"author\":\"Demo\",\"email\":\"[email protected]\",\"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.parse(fr.result) is an object. Check it- console.log(typeof JSON.parse(fr.result)) — karaxuna
– karaxuna, Commented Feb 4, 2014 at 8:53
We'd need to know what fr.result looks like and what console we're talking about (Firefox? Firebug? Chrome? Internet Explorer?). The rest of the code about FileReader API does not seem as relevant. — Álvaro González
– Álvaro González, Commented Feb 4, 2014 at 9:04

Álvaro González · Accepted Answer · 2014-02-05 10:14:26Z

If your actual file contents (as shown when opening the file with a text editor rather than dumping fr.result with the Firefox console) are exactly this:

"{\"id\":\"2\",\"name\":\"Links1\",\"position\":\"1\",\"author\":\"Demo\",\"email\":\"[email protected]\",\"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\"}"

... that explains the issue.

First of all, you don't really have valid JSON, as any JSON validator will reveal. In the JSON data format, the top level element must be an object or an array, and yours is a string. However, the JSON.parse() method apparently allows these cases of JSON subelements (probably because being able to decode them is a useful and easy to implement feature).

But since you have nothing but a single string, that's what you get after decoding it: a string. As far as JSON is concerned, your data format is not different from this:

"Hello, World!"

I suspect the problem is in the code you use to generate the JSON file. It looks like it's encoding the output twice. It should probably look like this:

{"id":"2","name":"Links1","position":"1","author":"Demo","email":"[email protected]","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"}

Please note that the leading and trailing quotes are gone (together with all the backslash escape sequences inside). This way, you have an encoded object and you get a decoded object.

mikeziminio · Accepted Answer · 2014-02-04 10:06:19Z

0

There are two ways:

To rewrite you file (like an obvious js file): {"id":"2","name":"Links1","position":"1", ...
If you can't change your file use this trick:

fr.onload = function () {

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

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

}

edited Feb 4, 2014 at 10:06

answered Feb 4, 2014 at 9:23

mikeziminio

717 bronze badges

3 Comments

XTRUST.ORG Over a year ago

Please check it after P.S

XTRUST.ORG Over a year ago

Yes. And what? How can I convert this into object?

XTRUST.ORG Over a year ago

I'm tried to use eval still nothing. String as output.

Collectives™ on Stack Overflow

javascript | json parse

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related