Js to Read Xml Files Into Json Objects

In this tutorial, we're going to acquire about JSON. We volition encompass JSON structure, different information types and how to use JSON inside JavaScript.

JSON is one of the most important concepts that you can learn as a programmer or as a QA.

Throughout your programming career you're going to use JSON all the time whether it'due south creating an API, consuming an API, or creating config files for your awarding.

What is JSON

JSON which stands for JavaScript object annotation, is simply a data representation format very similar to XML or YAML.

Information technology's used widely across the cyberspace for almost every single API that you lot will access, every bit well as for config files and things such as games and text editors.

An example of a JSON:

          #user.json {     "proper name": "Steve",     "age": 43,     "isProgrammer" true,     "hobbies": ["Reading Java books", "cooking", "classic music"],     "friends": [{         "name": "joey",         "age": 39,         "isProgrammer": fake,         "friends": [...]     }] }                  

Why Employ JSON

We utilize JSON because it's extremely lightweight to transport back and along in http requests and responses due to the minor file size.

It's piece of cake to read compared to something like XML since it's much cleaner and at that place'south non as many opening and closing tags to worry near.

JSON besides integrates very nicely with JavaScript since JSON is just a subset of JavaScript, which means anything you write in a JSON is valid JavaScript.

Almost every single major language has some form of library or built-in functionality to parse JSON strings into objects or classes in that language.

This makes working with JSON data extremely like shooting fish in a barrel inside of a programming language.

JSON Information Types

Now that nosotros empathize what JSON is and why it's important, let's dive into some of the syntax involved and the data types that JSON can stand for.

As we know JSON is a information representation format and then we demand to be able to represent a certain data types within it.

JSON natively supports:

• strings
• numbers numbers can be in whatsoever format whether they're decimal numbers whole numbers negative numbers even scientific annotation numbers
• booleans which tin can exist either true or false
• nix which substantially stands for nothing
• Arrays which can be a list of any of the types above
• Objects an object is the most complex but most used type within json every bit it allows you to represent data that are fundamental value pairs

JSON Case

Let's dive into an example of how to utilize json within of a file.

The starting time thing that you need to do is to create a file with the .json extension at the cease of it.

We're going to create a user.json file with a user object represented equally JSON.

To create an object we need to use opening and closing curly braces {} and then inside of that we'll put all of the central value pairs that make up our object.

Every unmarried belongings inside the JSON is a key value pair. The fundamental must be surrounded by double "" quotes followed by a colon : and and then the value for that key.

If we have multiple central value pairs, we demand commas , separating every single one of our central value pairs, similar to how we would create an array in a normal programming language.

Instance JSON File

          #user.json {     "name": "Steve",     "age": 43,     "isProgrammer" truthful,     "hobbies": ["Reading Java books", "cooking", "classic music"],     "friends": [{         "proper name": "joey",         "age": 39,         "isProgrammer": false,         "friends": [...]     }] }                  

In the in a higher place example, we have a file called user.json. Inside the file we take different data types.

The keys are always surrounded by double quotes. For the values, only the cord type is surrounded past double quotes.

In the case:

• name is string
• age is integer
• isProgrammer is boolean
• hobbies is an Array
• friends is an Array of Objects

How to Utilize JSON String Inside JavaScript

Let'south assume we have a JSON file called companies.json which is an array of company objects:

          [     {         "name": "Big corporate",         "numberOfEmployees": chiliad,         "ceo": "Neil",         "rating": 3.half-dozen     },     {         "proper noun": "Pocket-size startup",         "numberOfEmployees": 10,         "ceo": nada,         "rating": 4.iii     } ]                  

In the to a higher place instance, nosotros take two company objects inside a JSON array.

At present let's meet how we can use the above JSON within a JavaScript.

In most scenarios, we get a JSON as a string rather than a JSON object. To emulate this, nosotros correspond the above JSON as a string inside the JavaScript.

Our html file looks like:

          <!DOCTYPE html> <html> <head>     <championship>JSON Example</title> </caput> <body>   <script type="text/javascript">     let companies =     `[        {           "name": "Big corporate",           "numberOfEmployees": 1000,           "ceo": "Neil",           "rating": 3.6         },         {           "name": "Small startup",           "numberOfEmployees": x,           "ceo": aught,           "rating": four.3        }     ]`     console.log(JSON.parse(companies))     </script> </trunk> </html>                  

When we inspect the console log in Chrome Programmer Tools, the output is similar to what's shown beneath:

Then we tin can parse the above JSON by specifying what nosotros desire to extract. For example, if we wanted to go the name of the outset company in the array we would use:

          panel.log(JSON.parse(     companies[0].name ))  Output: Big corporate                  

Likewise, to become the rating of the second company we would utilise:

          console.log(JSON.parse(     companies[1].rating ))  Output: 4.iii                  

How to Convert JavaScript Object to JSON

Now suppose nosotros have a JavaScript object similar the one shown below:

          <html> <head>     <championship>JSON Instance</title> </head> <body>   <script type="text/javascript">     var person = {         proper noun: "Brad",         age: 35     }     </script> </trunk> </html>                  

To catechumen the person JavaScript object to JSON we utilise stringify method:

          jsonPerson = JSON.stringify(person);                  

The output is a valid JSON:

          {     "name": "Brad",     "age": 35 }                  

To make the to a higher place work, we need to catechumen the JSON dorsum to JavaScript object.

How to Convert JSON Object to JavaScript

To convert the above JSON object back to JavaScript, we use the parse method:

          jsPerson = JSON.parse(jsonPerson)                  

Complete Case

          <!DOCTYPE html> <html> <head>     <title>JSON Example</title> </head> <body>   <script type="text/javascript">     var person = {         name: "Brad",         age: 35     }     jsonPerson = JSON.stringify(person); //convert to JSON     panel.log(jsonPerson.proper name); //undefined      jsPerson = JSON.parse(jsonPerson); //catechumen to JS Object     console.log(jsPerson.proper noun); //Brad     </script> </trunk> </html>                  

Summary

• JSON stands for JavaScript Object Notation
• Lightweight data-interchange format
• Based on a subset of JavaScript
• Like shooting fish in a barrel to read and write
• Language independent
• Can be parsed in most modern programming languages

Data Types:

• Number: No departure between integer and bladder
• String: String of Unicode characters. Utilise double quotes
• Boolean: Truthful or false
• Array: Ordered list of 0 or more values in []
• Object: Unordered drove of key/value pairs
• Nix: Empty value

JSON Syntax Rules:

• Uses cardinal/value pairs - due east.g. {"name": "value"}
• Uses double quotes around Primal
• Must use the specified data types
• File type is .json
• MIME type is "Application/json"

I hope you lot found this JSON tutorial with Javascript useful. Y'all can now write simple and complex JSON files and interact with JSON strings inside JavaScript.

howardtwoubleff.blogspot.com

Source: https://devqa.io/json-tutorial-how-to-use-json-in-javascript/

Share this post