DONATE  
MENU
JSON
JAVASCRIPT
MYSQL
CSS
HTML
PHP
AJAX

JSON Tutorials

INTRODUCTION

» Introduction To JSON

» JSON Format

» JSON Practical Examples

.. » JSON » Introduction » JSON Format
Share Tweet WhatsApp

JSON Format

In the previous page, we've learnt that the JSON format is the format for ideally arranging data to be sent or received. The format is same as the JavaScript object format which is,
var data = {name: "StackBeginner.com", type: "Tutorial Website", company: "Lectual IT"};
This means whenever you want to encode data in the JSON format in JS, you will need to:
  1. Arrange that data just the way you arrange data in a JavaScript object. For example,
    var question = {id: 64, question: "JSON stands for?", answer: "JavaScript Object Notation"};
  2. Use the stringify() method to convert it to a string.
    var questionJSONFormat = JSON.stringify(question);
When Other Programming Languages Retrieve JSON Data When another programming language like PHP or JAVA accesses data in JSON format, the language will usually have a function or method to convert the data not just from a string but from the JavaScript object format to its own object equivalent. For example, PHP will convert it from a string and from the JS object format(JSON format) to a PHP associative array, which is the equivalent of a JS object in PHP. This will then enable a PHP programmer to work with such data in PHP programs. When Other Programming Languages Encode Data In JSON Format To encode data in the JSON format, programming languages will usually also have a function or method to convert such data from their own object equivalent to JavaScript object equivalent, which is the standard JSON format for transporting data across servers. Notice how a PHP function(json_encode) for working with JSON in PHP converted a PHP associative array to a JavaScript object format, which is the JSON format.
<?php
$data = ["name"=>"Mike Tyson", "occupation"=>"Boxing"];
echo json_encode($data);
/*OUTPUT:
{"name":"Mike Tyson","occupation":"Boxing"}
*/
?>

Copy SEE RESULT

When JavaScript Retrieves JSON Data When you retrieve JSON data from a server using AJAX, you simply,
  1. Convert the data to its standard format(its format before it was converted to JSON string) using the parse() method.
    var originalFormat = JSON.parse(data);
  2. And loop or access any of its individual values based on how the data was arranged.
     for (x in originalFormat){
    alert(originalFormat.x); //Looping decoded object
    }
    document.write("My name is "+originalFormat["name"]); //Accessing a value of the decoded object
JSON Format Slight Exception With The JS Object Format The JSON format which we earlier said uses same format with the JavaScript object format have few exception or differences. This is in terms of the data types that can be supported in both. Remember, the elements or values of an object can be just any other data type such as numbers, strings, booleans, nulls, undefined, dates, arrays, other objects and functions. But not all these data types are supported in the JSON format or an object to encode in JSON. This means not just all the data types can be transported using JSON. For example, functions are not supported. The supported data types in the JSON format or object are,
  • numbers
  • strings
  • booleans
  • nulls
  • arrays
  • objects
This means, each and every value that must be contained in an object variable that is to be sent as JSON must be a data type of any of the above. Data types such as,
  • undefined
  • functions
  • dates
cannot be encoded. This is because, while a lot of programming languages recognizes and uses numbers, booleans, strings, nulls, arrays and objects as data types, not all languages sees undefined, dates, functions as data types just the way JS does. Your code will very well execute if the JSON object contains any of the unsupported data types but then, the value pairs will be stripped off. If it is a date, just the date string will be sent instead of the date object. Same goes with undefined.
<script>
var data = {myFunc: function(){alert("OK");}, msg: "Success", code: 1}; //An object with a function as value

data = JSON.stringify(data);

alert(data); //The unsupported data type (function) will be stripped off
</script>

Copy PRACTICE IT

Nevertheless, there is a way to go about this so that you can send unsupported data types in JSON format. It involves converting such unsupported value to a string. This means, if you must send functions in a JSON format, you should convert that function to a string. Example
<script>
var data = {myFunc: function(){alert("OK");}, msg: "Success", code: 1}; //An object with a function as value

data.MyFunc = String(data.myFunc); //converts the function to a string since functions cannot be contained in the JSON object

var data_string = JSON.stringify(data); //converts the object to a string so that it can be sent

//The variable "data_string" is now in a correct JSON format for transportation
alert(data_string);
</script>

Copy PRACTICE IT

Explained We were trying to compose an object that can be encoded in the JSON format but inside the object, there was a function definition and JSON doesn't support functions. To resolve this, we converted the function definition to a string before converting the whole object to a JSON string. When such data is retrieved, you will need to in addition to parsing the data into its original state, convert the function string back to its original function state in order to use it as a function. You Can Send Any Of The Supported Datatypes Though we've learnt that JSON data is arranged in the form of a JavaScript object but then, that is when you are sending and need to arrange more than one data. The truth is just any of the supported data types can be encoded and decoded standalone in JSON. This means you can encode and decode just a number, string, boolean, null, array and the usual object.
<script>
//FUNCTION
function displayData(data){
data = JSON.parse(data); //decodes the data from a string
//USING DATA
alert(data);
}

//PASSING JSON DATA
var data = "Hello World" //STRING
data = JSON.stringify(data); //converts the data to JSON string

displayData(data); //assigning the data as argument to a function
</script>

Copy PRACTICE IT

But then, will it be sense making needing to encode just a number or a string in JSON? Therefore, encode data in JSON when such is either an array or object. SUMMARY
  1. Data to be encoded in the JSON format are usually arranged in the form of a JS object.
  2. But then, none of the values in the object should be a function, date or undefined as they are not supported.
  3. This is because JSON is not meant for JavaScript alone and other programming languages do not recognize these data types.
  4. Nevertheless, to send any of the unsupported datatypes, you need to convert it to a supported data type.
  5. The only data type that accommodates all conversion from other datatypes is a string.
  6. You therefore need to convert the unsupported data type to a supported datatype(string).
  7. You are not restricted to send only objects in JSON format, you can send just any of the supported datatypes alone but is encoding the data type worth the extra codes?
  8. Maybe "YES" for arrays and objects but definitely not for numbers, strings, booleans and nulls.
Take a short quiz on JSON Format.
Ask a question or tell us if JSON Format is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode