A common use of JSON is to exchange data with a web server.
When receiving data from a web server, it is always in string format.
Use JSON.parse() to convert the string into a JavaScript object.
If you have data stored in a JavaScript object, you can convert it into JSON and send it to a server.
| const myObj = {name: “John”, age: 31, city: “New York”}; const myJSON = JSON.stringify(myObj); window.location = “demo_json.php?x=” + myJSON; |
If you receive data in JSON format, you can easily parse it into a JavaScript object.
| const myJSON = ‘{“name”:”John”, “age”:31, “city”:”New York”}’; const myObj = JSON.parse(myJSON); document.getElementById(“demo”).innerHTML = myObj.name; |
You can request JSON from the server using an AJAX request.
As long as the server response is in JSON format, you can parse the string into a JavaScript object.
Use the XMLHttpRequest to retrieve data from the server.
| const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { const myObj = JSON.parse(this.responseText); document.getElementById(“demo”).innerHTML = myObj.name; }; xmlhttp.open(“GET”, “json_demo.txt”); xmlhttp.send(); |
When using JSON.parse() on JSON derived from an array, the method will return a JavaScript array rather than a JavaScript object.
JSON returned from a server as an array:
| const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { const myArr = JSON.parse(this.responseText); document.getElementById(“demo”).innerHTML = myArr[0]; } } xmlhttp.open(“GET”, “json_demo_array.txt”, true); xmlhttp.send(); |