Saturday, April 21, 2018

About JSON formatter tool

A common use of JSON is to read data from a web server, and display the data in a web page.
JSON formatter


An overview about JSON formatter online tool

JSON Formatter is a web-based tool to view, edit, format, and validate JSON. There are various modes such as a tree editor, a code editor, and a plain text editor. The editor can be used as a component in your own web application. The library can be loaded as CommonJS module, AMD module, or as a regular javascript file. It supported Chrome, Firefox, Safari, Opera, and Internet Explorer 9+.

When cutting and pasting text in the editor using the system clipboard, no data is sent via the server.

This site uses cookies to:

Store your current JSON data at your local PC for convenient usage. You can test by entering to incognito mode in new window or another browser :).
From Google Adsense to personalize ads. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.

Check this tool to format and validate your JSON data: JSON formatter online

Friday, March 9, 2018

JSON in Javascript

JSON (in Javascript) is a string!
People ofetn assume all Javascript objects is JSON and JSON is a Javascript object. This is incorrect.
In Javascript var x = {x:y} is not JSON, this is a Javascript object. The two are not the same thing. The JSON equivalent (represented in the Javascript language) would be var x = '{"x":"y"}'x is an object of type string not an object in it's own right. To turn this into a fully fledged Javascript object you must first parse it, var x = JSON.parse('{"x":"y"}');x is now an object but this is not JSON anymore.

When working with JSON and JavaScript, you may be tempted to use the eval function to evaluate the result returned in the callback, but this is not suggested since there are two characters (U+2028 & U+2029) valid in JSON but not in JavaScript.
Hence, one must always try to use Crockford's script that checks for a valid JSON before evaluating it.
Below is an example on how to use the JSON Parser (with the json from the above code snippet):
//The callback function that will be executed once data is received from the server
var callback = function (result) {
var johnny = JSON.parse(result);
//Now, the variable 'johnny' is an object that contains all of the properties
//from the above code snippet (the json example)
alert(johnny.firstName + ' ' + johnny.lastName); //Will alert 'John Smith'
};
The JSON Parser also offers another very useful method, stringify. This method accepts a JavaScript object as a parameter, and outputs back a string with JSON format. This would be useful when you want to send data back to the server:
var anObject = {name: "Andreas", surname : "Grech", age : 20};
var jsonFormat = JSON.stringify(anObject);
//The above method will output this: {"name":"Andreas","surname":"Grech","age":20}
The above two methods (parse and stringify) also take a second parameter, which is a function that will be called for every key and value at every level of the final result, and each value will be replaced by result of your inputted function.
Check this to format and validate JSON: JSON formatter online tool.

Friday, January 5, 2018

JSON.stringify()

Convert a JavaScript object into a string with JSON.stringify().

JSON.stringify()

Stringify a JavaScript Object

Imagine we have this object in JavaScript:
var obj = { "name":"John""age":30"city":"New York"};
Use the JavaScript function JSON.stringify() to convert it into a string.
var myJSON = JSON.stringify(obj);
The result will be a string following the JSON notation.
myJSON is now a string, and ready to be sent to a server:

Example

var obj = { "name":"John""age":30"city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
You will learn how to send JSON to the server in the next chapter.

Stringify a JavaScript Array

It is also possible to stringify JavaScript arrays:
Imagine we have this array in JavaScript:
var arr = [ "John""Peter""Sally""Jane" ];
Use the JavaScript function JSON.stringify() to convert it into a string.
var myJSON = JSON.stringify(arr);
The result will be a string following the JSON notation.
myJSON is now a string, and ready to be sent to a server:

Example

var arr = [ "John""Peter""Sally""Jane" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

Exceptions

Stringify Dates

In JSON, date objects are not allowed. The JSON.stringify() function will convert any dates into strings.

Example

var obj = "name":"John""today":new Date(), "city":"New York"};
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;
You can convert the string back into a date object at the receiver.

Stringify Functions

In JSON, functions are not allowed as object values.
The JSON.stringify() function will remove any functions from a JavaScript object, both the key and the value:

Example

var obj = "name":"John""age":function () {return 30;}, "city":"New York"};
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;
This can be omitted if you convert your functions into strings before running the JSON.stringify() function.

Example

var obj = "name":"John""age":function () {return 30;}, "city":"New York"};
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;
Use this tool to edit, convert, format, and validate JSON: JSON formatter online tool

Friday, October 13, 2017

JSON HTML

JSON HTML

JSON can be easily translated into JavaScript. JavaScript can be used to make HTML in your web pages.

HTML Table

Make an HTML table with data received as JSON:

Example

obj = { "table":"customers""limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
            txt += "<tr><td>" + myObj[x].name + "</td></tr>";
        }
        txt += "</table>" 
        document.getElementById("demo").innerHTML = txt;
    }
}
xmlhttp.open("POST""json_demo_db_post.php"true);
xmlhttp.setRequestHeader("Content-type""application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
HTML Drop Down List

Make an HTML drop down list with data received as JSON:

Example

obj = { "table":"customers""limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<select>"
        for (x in myObj) {
            txt += "<option>" + myObj[x].name;
        }
        txt += "</select>" 
        document.getElementById("demo").innerHTML = txt;
    }
}
xmlhttp.open("POST""json_demo_db_post.php"true);
xmlhttp.setRequestHeader("Content-type""application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
Free online tool to format, edit, and validate JSON: JSON Formatter tool.

Thursday, June 1, 2017

JSON Shortcuts - Line Operations and Selection

Find out basic keyboard shortcuts of JSON for line operations and selection action through the list below.

JSON shortcuts

JSON Shortcuts - Line Operations

Windows/LinuxMacAction
Ctrl-DCommand-DRemove line
Alt-Shift-DownCommand-Option-DownCopy lines down
Alt-Shift-UpCommand-Option-UpCopy lines up
Alt-DownOption-DownMove lines down
Alt-UpOption-UpMove lines up
Alt-DeleteCtrl-KRemove to line end
Alt-BackspaceCommand-BackspaceRemove to linestart
Ctrl-BackspaceOption-Backspace, Ctrl-Option-BackspaceRemove word left
Ctrl-DeleteOption-DeleteRemove word right
---Ctrl-OSplit line

JSON Shortcuts - Selection

Windows/LinuxMacAction
Ctrl-ACommand-ASelect all
Shift-LeftShift-LeftSelect left
Shift-RightShift-RightSelect right
Ctrl-Shift-LeftOption-Shift-LeftSelect word left
Ctrl-Shift-RightOption-Shift-RightSelect word right
Shift-HomeShift-HomeSelect line start
Shift-EndShift-EndSelect line end
Alt-Shift-RightCommand-Shift-RightSelect to line end
Alt-Shift-LeftCommand-Shift-LeftSelect to line start
Shift-UpShift-UpSelect up
Shift-DownShift-DownSelect down
Shift-PageUpShift-PageUpSelect page up
Shift-PageDownShift-PageDownSelect page down
Ctrl-Shift-HomeCommand-Shift-UpSelect to start
Ctrl-Shift-EndCommand-Shift-DownSelect to end
Ctrl-Shift-DCommand-Shift-DDuplicate selection
Ctrl-Shift-P---Select to matching bracket
Check out this site if you want to get JSON formatter tool free online.

Friday, May 26, 2017

Differences between JSON and JSONP

What are the differences between JSON and JSONP? Are they the same? Let's find out.

JSON vs JSONP

JSON is a language designed for lightweight data exchange in an format that is easy for both humans and computers to understand. See: JSON formatter for more information.
JSON language could work on a technology which is not restricted by the same origin policy with only a small amount of changes required. The combination of this tech, along with the adapted form of JSON was branded JSONP.
The new technology that is fundamental to JSONP is nothing more than the bog-standard <script> tag. 
The full power of the <script> tag is often overlooked, or at the very least, taken for granted:
  1. <script> tags are not restricted by any same origin policy, so can make requests to any domain.
  2. <script> tags can be added programatically, which allows developers to request resources via the <script> tag as and when required:
    var element = document.createElement("script"); // create the element
    element.src = 'http://somewhere.com/some/resource.js'; // set the target resource
    document.getElementsByTagName("head")[0].appendChild(element); // add the element to the DOM
  3. The src attribute of the <script> tag is not restricted to just JavaScript files. Whatever the target, it will be retrieved via the relevant transport protocol (HTTP GET/ HTTPS GET), and the content will be evaluated by the JavaScript engine. If the content is not valid JavaScript, a Parse Error will be thrown.
JSONP is JSON with padding. You put a string at the beginning and a pair of parenthesis around it. For example:



//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});