JavaScript: JSON and JSON-server

JSON

• JSON stands for JavaScript Object Notation also called as Javascript objects
• JSON is used to transfer the data over the network
• It’s lightweight compared to XML
• Reading of JSON is easy compared to XML
• JSON is network friendly format

Syntax

• Object: { }
• Array: [ ]
• Data: key and value pairs, key and values separated by “:”, key & value pairs separated by using “,”

JSON data in table form

https://github.com/lassiecoder/medium/tree/master/JSONtable

AJAX calls

• AJAX also known as Asynchronous JavaScript and XML
• It’s a frontend tool used to communicate with the backend
• It helps to develop fast and dynamic web pages
• It supports various formats including JSON, XML, HTML and text files
• Make requests to the server without reloading the pages.
• XML is known as Extensible Markup Language, mainly focuses on the transfer of data
• XML tags identify the data and used to store and fetch the data, rather than specifying how to display them

Updating JSON data using JSON server

• JSON server used to create the Rest API’s (GET, POST, PUT, DELETE)
• JSON server supports only JSON object
• JSON server is a lightweight server
• By default JSON server running on port number 3000

Create a workspace as shown in the below image

https://github.com/lassiecoder/medium/blob/master/JSONserver/demo.json

GET, POST, PUT and DELETE request with their importance

We install JSON server by using the following command inside the “demo.json” file:

We start the server by using the following command

Create another workspace as shown in the below image

GET request

GET request

https://github.com/lassiecoder/medium/blob/master/asyncJS/getRequest.html

POST request

https://github.com/lassiecoder/medium/blob/master/asyncJS/postResponse.html

PUT request

https://github.com/lassiecoder/medium/blob/master/asyncJS/putRequest.html

DELETE request

https://github.com/lassiecoder/medium/blob/master/asyncJS/deleteRequest.html