Change: JSON

created on Feb. 7, 2013, 4:30 p.m. by Hevok & updated on Feb. 7, 2013, 4:30 p.m. by Hevok

*JSON is a lightweight data interchange format that is based on JavaScript Object Syntax. Since it is based on JavaScript, it s really easy to use with JavaScript (much easier than for example XML).

A JavScript object can be in JSON and seen in the JavaScript object representation of JSON that is passed into the template. The difference between a JavaScript object and JSON is that JSON is simply a string that can then be parsed to create a JavaScript object.

JSON is were well suited to pass information to templates. For instance it can be used to get image data into the Applications, like the image file name and the width and height, whether it is been rotated at all and various pieces of information.

The following code illustrated the structure of JSON and shows how to parse and store it as an object as well as how to access individual fields of it:

.. sourcecode:: html

<html>
    <body>
    </body>
    <script> 
        // This is an example how JSON is structured:
        // it is a an actual JavaScript Object and JSON 
        // is a string that represents that Object
        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
                    }
                },
                "chaingun_impact.png": {
                    "frame": {
                        "x":1162,
                        "y":322,
                        "w":38,
                        "h":34},
                    "rotated": false,
                    "trimmed": true,
                    "spriteSourceSize": {
                        "x":110,
                        "y":111,
                        "w":38,
                        "h":34},
                    "sourceSize": {
                        "w":256,
                        "h":256}
                },
                "chaingun_impact_0000.png": {
                    "frame": {
                        "x": 494,
                        "y": 260,
                        "w": 22,
                        "h": 22
                    },
                    "rotated": false,
                    "trimmed": true,
                    "spriteSourceSize": {
                        "x": 113,
                        "y": 108,
                        "w": 22,
                        "h": 22
                    },
                    "sourceSize": {
                        "w": 256,
                        "h": 256
                    }
                }
            }
        };

        parseJSON = function (weaponJSON) {

             // Use JSON.parse function to parse the JSON input:
             var weapon = JSON.parse(weaponJSON);
             // Individual fields can be grabbed:
             var x = weapon['frames']['chaingun_impact.png']['spriteSourceSize']['x']
             console.log(x); // Print it to the console
             return x;
        };

        parseJSON(JSONExample);

    </script>
</html>
json.gif

Tags: js, format, transfer
Categories: Tutorial
Parent: JavaScript

Comment: Created entry.

See entry | Admin

Comment on This Data Unit