Tuesday , 23 May 2017
Home / Programming / JavaScript / External JSON File – JSON Tutorial
External JSON File
External JSON File

External JSON File – JSON Tutorial

This tutorial is a part of the JSON tutorial series. You can view the full list of tutorials by clicking here.

In this tutorial, we’ll learn how to create an external JSON file. By doing this, our data can be accessed from various languages or multiple sources without having to filter the data.

Let’s set up our file. To create a JSON file, first create a file called people.json. The .json is a file extension for JSON based files. Place this file inside the js folder alongside our script.js file. Open up your JSON file and add this bit of code.

The data you put in your JSON file is similar to how you would create it in JavaScript. The only difference is you DO NOT have to type in var people = before our data. Other than that, you create it like you normally would. In this JSON file, I have 2 properties named name and age. You’ll notice that I put quotes around the key name. The reason you do this is because when you grab this data from an external source, you can get a few errors because they’re not wrapped in quotes. Since we do this, it’d be kind hard to tell what’s a property and what’s a value.  So, it’s always good to format your data before moving on.

To grab this data will depend on the language you’re using. Since we’ve been using JavaScript so far, we’ll be using JavaScript to grab our JSON data. In your script.js file, add this bit of code.

WHOA! What’s going on here? Well, to grab data from an external file, you should use AJAX. AJAX stands for Asynchronous JavaScript.  This is not an AJAX tutorial, to learn about AJAX please view my AJAX tutorial series. I’ll break this down in basic terms however.

First, we call the function AJAX_JSON_req(). The string passed in is the URL to the JSON file. This may seem confusing, but since our script is being loaded inside the HTML document, then the location of our JSON file has to be relative to the document.

Next, inside our function, we set up our AJAX request and then send that AJAX request. The most important part of this bit code are these 2 lines of code.

We create a variable named response. This variable will be assigned the value of the response we get from the AJAX request. Before we go any further, we first have to parse this text.  The thing is, we’re returned 1 huge string. This isn’t what we want. We want a JSON object. So, the JSON.parse() method converts a string into a JSON object for us.

Now, you can access this JSON object like you would with any other JSON object. We output the name into our document.

Conclusion

That’s it! JSON is very simple to use and learn. If you decide to view other tutorials, then you should know there’s another function to help convert strings to objects. That is the eval() function. However, I highly advise you stay away from this function at all times. As it can provides huge security risks. The JSON.parse() method works just as fine and is more secure for JSON.

If you would like more information about JSON then go here.

http://www.json.org/

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

11 comments

  1. I did the same as you (and it’s the same when i download your code :'( ), but when i test the page index.html it’s empty and nothing is shown
    I’m so confused and i don’t know what to do, i’m working in project and this’s the step number 1 and i’m blocked .

    Please help mee

  2. How about an update? jQuery is the way to go I think?
    keywords: jQuery.parseJSON and jQuery.getJSON

    http://api.jquery.com/jquery.getjson/

    http://api.jquery.com/jQuery.parseJSON/

  3. I’m a javascript newbie. What I am having trouble with is using this function to load the JSON file into a variable to be used outside the function. I tried adding a return response; statement a few places in there and didn’t seem to work. I want to be able to write:

    var my_json_object = AJAX_JSON_REQ( ‘my_data.json’ )

    and then be able to access data from that object like:

    my_json_object[0].x

    Any help would be very appreciated.

    • When it comes to JavaScript, it’s common for developers to want to code things from top to bottom, but that’s not really the style you should be using for JavaScript. You should write your code inside the function or you can create another function and call that function without the AJAX function and send the JSON over so you can separate the AJAX code from your own.
  4. Hi,
    It’s working. But Why loading progress is not stop after script in run.

Leave a Reply

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