JSON pertamakali dipopulerkan oleh Douglas Crockford, seorang software engineer yang juga terlibat dalam pengembangan bahasa pemrograman Javascript. Sebelum kata “JSON” belum ada, orang-orang hanya mengenal JSON sebagai Objek Javascript yang dikirim melalui jaringan. Sejak meledaknya teknologi AJAX pada tahun 2000, JSON mulai diperkenalkan dan pada tahun 2001, domain json.org mulai mengudara hingga saat ini JSON banyak digunakan di mana-mana. Show
JSON biasanya digunakan sebagai format standar untuk bertukar data antar aplikasi tetapi sebenarnya tidak hanya itu saja, masih ada fungsi lain dari JSON. Berikut ini beberapa penerapan JSON yang pernah saya temui: – JSON sebagai format untuk bertukar data client dan server atau antar aplikasi. Contoh: RESTful API; – JSON sebagai tempat menyimpan data, contoh: Database Mongodb; – JSON digunakan untuk menyimpan konfigurasi project, contoh: file composer.json pada project PHP dan package.json pada Nodejs; – JSON digunakan untuk menyimpan konfigurasi dan penyimpanan data pada Hugo; – JSON digunakan untuk menyimpan konfigurasi project pada Nodejs; – JSON digunakan untuk menyimpan data menifest;
Berbicara tentang JSON, selanjutnya kita akan membahas tentang struktur data dari JSON. JSON selalu dimulai dengan tanda kurung kurawal { dan ditutup dengan kurung }. Lalu di dalam kurung kurawal, berisi data yang format key dan value. Jika terdapat lebih dari satu data, maka dipisah dengan tanda koma dan di data terakhir tidak diberikan koma. Lalu key dan value dipisah dengan titik dua, kita bisa memberikan tipe data apa pun. Bahkan juga bisa kita isi dengan array dan objek. JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article, we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON. Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see First steps and Building blocks) and OOJS basics (see Introduction to objects).Objective:To understand how to work with data stored in JSON, and create your own JSON strings.JSON is a text-based data format following JavaScript object syntax, which was popularized by Douglas Crockford. Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript, and many programming environments feature the ability to read (parse) and generate JSON. JSON exists as a string — useful when you want to transmit data across a network. It needs to be converted to a native JavaScript object when you want to access the data. This is not a big issue — JavaScript provides a global JSON object that has methods available for converting between the two. Note: Converting a string to a native object is called deserialization, while converting a native object to a string so it can be transmitted across the network is called serialization. A JSON string can be stored in its own file, which is basically just a text file with an extension of 1, and a MIME type of 2.As described above, JSON is a string whose format very much resembles JavaScript object literal format. You can include the same basic data types inside JSON as you can in a standard JavaScript object — strings, numbers, arrays, booleans, and other object literals. This allows you to construct a data hierarchy, like so:
If we loaded this string into a JavaScript program and parsed it into a variable called 3 for example, we could then access the data inside it using the same dot/bracket notation we looked at in the JavaScript object basics article. For example:
To access data further down the hierarchy, you have to chain the required property names and array indexes together. For example, to access the third superpower of the second hero listed in the members list, you'd do this:
Note: We've made the JSON seen above available inside a variable in our JSONTest.html example (see the source code). Try loading this up and then accessing data inside the variable via your browser's JavaScript console. Above we mentioned that JSON text basically looks like a JavaScript object inside a string. We can also convert arrays to/from JSON. Below is also valid JSON, for example:
The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example 3.
So, let's work through an example to show how we could make use of some JSON formatted data on a website. To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML, plus a 4 element to contain the JavaScript code we will be writing in this exercise:
We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json. We are going to load the JSON into our script, and use some nifty DOM manipulation to display it, like this: The top-level function looks like this:
To obtain the JSON, we use an API called Fetch. This API allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. In our function, the first four lines use the Fetch API to fetch the JSON from the server:
Note: The 7 API is asynchronous. We'll learn a lot about asynchronous functions in the next module, but for now, we'll just say that we need to add the keyword 2 before the name of the function that uses the fetch API, and add the keyword 3 before the calls to any asynchronous functions.After all that, the 3 variable will contain the JavaScript object based on the JSON. We are then passing that object to two function calls — the first one fills the 5 with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the 6.Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:
Here we first create an 7 element with 8, set its 9 to equal the 0 property of the object, then append it to the header using 1. We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a template literal containing both the 2 and 3 properties of the object.Next, add the following function at the bottom of the code, which creates and displays the superhero cards:
To start with, we store the 5 property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.Next, we use a to loop through each object in the array. For each one, we:
Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.) Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation. Finally, we need to call our top-level 8 function:
The above example was simple in terms of accessing the JavaScript object, because we converted the network response directly into a JavaScript object using 9.But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending it. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:
You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that:
The key snippet of code is here:
As you might guess, 1 works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action: 0Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using 1 — saving the return value in a new variable — then checking it again.You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON. In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript. |