JSON For Beginners

JSON is a lightweight data format, JSON normally we use for data interchanging between client and server.

What is JSON: 

JSON stands for Javascript object notation, JSON normally we use for data interchanging between client/browser and server data interchanging means for example when we send an ajax request to a server for fetching data so that data we can grab in the JSON format before the JSON for data interchanging XML was used but now JSON replaced XML because XML had some advantages.
json
json

JSON Advantages: 

  1. JSON is a lightweight format. lightweight means JSON format consumes low space
  2. It's human readable, JSON is very close to javascript objects 
  3. Javascript easily convert JSON string to a javascript object literal 

JSON Formates: 

  1. it's accepting a string value
  2.  it's accepting integer values
  3. float values
  4. null values
  5. array

JSON Valid Data:

In the below example as you can see you have a JSON object inside that object we have a posts array and now inside the array, we have four objects, so this is a valid JSON data. 

{

    "posts": [
     
        {"title": "first post title", "body": "first post body"},
        {"title": "second post title", "body": "second post body"},
        {"title": "third post title", "body": "third post body"},
        {"title": "fourth post title", "body": "fourth post body"},{"title": "fifth post title", "body": "fifth post body"}

    ]

}

Ajax request fetch JSON data from the server

Below example basically sending an ajax request to a server and fetch JSON data from the server.
const http = new XMLHttpRequest();

              http.onreadystatechange = function(){

                if(http.readyState === 4 && http.status === 200){

                    const users = JSON.parse(http.response);
                          users.map((user) => {

                            console.log(user.id);

                          })
                   

                }

              }

              http.open("get", "https://jsonplaceholder.typicode.com/users");
              http.send();
we are fetching data from the server and server return data in JSON format. so now we have to convert that JSON data to a javascript object so for that we have used JSON.parse() method in the above example. 

COMMENTS

Name

ajax,2,HTML & CSS,19,JavaScript,1,PHP,11,
ltr
item
webtipstricks: JSON For Beginners
JSON For Beginners
JSON is a lightweight data format, JSON normally we use for data interchanging between client and server.
https://4.bp.blogspot.com/-pVqY3KDE8-o/XOaATkrHMkI/AAAAAAAAB5Q/mmO2UWzVXvEgtU0J24dpreCj2ZOJXdmhACLcBGAs/s640/JSON%2BFOR%2BBEGINNERS-min.png
https://4.bp.blogspot.com/-pVqY3KDE8-o/XOaATkrHMkI/AAAAAAAAB5Q/mmO2UWzVXvEgtU0J24dpreCj2ZOJXdmhACLcBGAs/s72-c/JSON%2BFOR%2BBEGINNERS-min.png
webtipstricks
https://www.webtipstricks.com/2019/05/json-for-beginners.html
https://www.webtipstricks.com/
https://www.webtipstricks.com/
https://www.webtipstricks.com/2019/05/json-for-beginners.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy