Accessing data from a JSON object selected locally using HTML5 File API

Question

I'm trying to get access to a JSON object which is selected locally using the HTML 5 API. My code so far is:

HTML

<input type="file" id="files" name="files[]" />

Javascript

JsonObj = null

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    f = files[0];
    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {
            // Render thumbnail.
            JsonObj = e.target.result
            console.log(JsonObj);
            var parsedJSON = JSON.parse(JsonObj);
            var x = parsedJSON['frames']['chaingun.png']['spriteSourceSize']['x'];
            console.log(x);

        };
    })(f);

    // Read in JSON as a data URL.
    reader.readAsDataURL(f);
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Fiddle here: http://jsfiddle.net/jamiefearon/8kUYj/11/

So the user selects a Json file which is then represented by JsonObj. To test I have assess to the Json object I print to console: parsedJSON['frames']['chaingun.png']['spriteSourceSize']

I get the following error in Chrome in the console:

fiddle.jshell.net:33Uncaught SyntaxError: Unexpected token ILLEGAL
(anonymous function)fiddle.jshell.net:33

For reference the Json file I am using is:

JSONExample = {
    "frames": {
        "chaingun.png": {
            "frame": {
                "x": 1766,
                "y": 202,
                "w": 42,
                "h": 34
            },
            "rotated": false,
            "trimmed": true,
            "spriteSourceSize": {
                "x": 38,
                "y": 32,
                "w": 42,
                "h": 34
            },
            "sourceSize": {
                "w": 128,
                "h": 128
            }
        }        
    }
};

Thank you all for your help.

Please could you explain how I can accomplish what I'm trying to do. I want the user to be able to select a Json file from their computer and make it available for editing withing JavaScript (I know you can't edit the original, but a copy of it). — Jamie Fearon, Feb 07 '13 at 12:06
Look at my answer and the fiddle, which I updated to work (unless somebody else makes any more changes), and update your JSON file, because right now that's Javascript code not JSON and won't parse. — Mörre, Feb 07 '13 at 12:08

score 2 · Accepted Answer · edited Apr 23 '17 at 07:14

2

JSON parse works, really? e.target.result is a BLOB - how can JSON.parse parse this??? Not to mention that your JSON file is not really JSON :)

Use readAsText(f, 'UTF-8') instead of readAsDataURL, and make the input (real) JSON (remove the leading JSONExample = and the trailing ;).

I think I changed the fiddle... I'm not used to write-access for everyone on random webpages :)

EDIT: Okay, maybe I did not update the file - no idea if I can. Just make the changes I mention, and there is no "cinempa.png" key in your example "almost-JSON" so fix that too.

edited Apr 23 '17 at 07:14

Nic

6,211
10
46
69

answered Feb 07 '13 at 12:04

Mörre

5,699
6
38
63

I've updated my code to remove the "cinempa.png" key reference. Trying your ideas no in the fiddle. – Jamie Fearon Feb 07 '13 at 12:16
1

It works!! Thanks Morre. Working Fiddle here: http://jsfiddle.net/jamiefearon/8kUYj/20/ – Jamie Fearon Feb 07 '13 at 12:23

Accessing data from a JSON object selected locally using HTML5 File API

1 Answers1