Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted March 16th, 2016
Getting started using JSON

What is a JSON?

JSON stands for “JavaScript Object Notation”, this is a way to send JavaScript object over the internet. This way their information can be used in web-applications.

Why JSON?

There are multiple reasons why, you should use JSON in my opinion:
– Information can be stored a retrieved from a server, this way information doesn’t need to be hard coded in the application.
– Data can be modified, read and maintained easily.
– JSON files are lightweight than the more “older” ways of transferring data. I.e. with XML files.

How does JSON work?

JSON files are like an Array full of (mostly) JavaScript objects. these can be hosted on a server and accessed in an application after parsing the JSON.

We are using an example JSON file from “http://time.jsontest.com/” which contains:

    {
       "time": "11:23:00 AM",
       "milliseconds_since_epoch": 1456831380708,
       "date": "03-01-2016"
    }

Getting (parsing) the JSON’s content

Now we want this content to get pushed into a local variable to retrieve the information. Parsing a JSON is the getting and putting the JSON array into a local variable. See below for a JavaScript example on how to parse a JSON.

    var xmlhttp = new XMLHttpRequest();
    var url = "http://time.jsontest.com/";
    var myArr;

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myArr = JSON.parse(xmlhttp.responseText);
      }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();

This function will be triggered every time the ready state of the website changes, and will parse the JSON that can be found at the given URL.
Now it’s possible to access the values and objects inside the parsed JSON.

We want to use this content in our “application” so we are going to add a function to call the parsing function. To be sure that the array isn’t undefined, otherwise this could be the case. Servers need some time to be reached and can’t be as quickly as local data, it could take some time. This is where the “onreadystatechange” comes into place. It waits until everything is full loaded and the “ready state” of the website changes. The code will execute.

Now we are done parsing the JSON’s content into a variable, this means we now can use the JSON’s content in our application.

Accessing the JSON’s content

Since we parsed the online JSON into a local variable (myArr according to the example), it’s easy to use its information in your application.

These variables are accessible like a normal JavaScript object.

http://codepen.io/stefanjs98/pen/dMOWGK/

Posted by Stefan Streur

Leave a Reply

Your email address will not be published. Required fields are marked *