JavaScript Json & MXL

❮ Prev Next ❯

In this chapter we will going to explaine what is the main different between JSON and XML, So without too much wast of time let get started.

JSON

JSON (JavaScript Object Notation) is a lightweight data interchange format that's easy to read and write for humans and easy to parse and generate for machines.

It is built on two structures: a collection of name/value pairs (often realized as an object, record, struct, dictionary, hash table, keyed list, or associative array) and an ordered list of values (often realized as an array, vector, list, or sequence).

Example of a JSON object 


const jsonObject = {
  "name":"John",
  "age":30,
  "city":"New York"
}

console.log(user.name); // Output: John
console.log(user.age); // Output: 30
console.log(user.city); // Output: New York

XML

XML (eXtensible Markup Language) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.

Unlike JSON, which is based on JavaScript, XML is a more verbose data format used extensively in web services and configuration files.

Example of an XML document 


<person>
  <name>John</name>
  <age>30</age>
  <city>New York</city>
</person>

Parsing JSON in JavaScript

To convert a JSON string into a JavaScript object, you use the JSON.parse()method.

This method is particularly useful when you receive JSON data from a web server and need to work with it in your application. 

// JSON string
const jsonString = '{"name": "Alice", "age": 25, "city": "Los Angeles"}';

// Parse JSON string to JavaScript object
const user = JSON.parse(jsonString);

console.log(user.name); // Output: Alice
console.log(user.age); // Output: 25
console.log(user.city); // Output: Los Angeles

Parsing XML in JavaScript

To parse XML in JavaScript, you can use the DOMParserobject.

This allows you to convert an XML string into an XML Document object, which can then be traversed and manipulated using DOM methods. 

// XML string
const jsonString = '<person><name>Alice</name><age>25</age><city>Los Angeles</city></person>';

// Parse XML string to XML Document
const parser = new DOMParser();
const xmlDoc = parse.parseFromString(xmlString, "text/xml");

console.log(xmlDoc.getElementsByTagName("name").[0].childNodes[0].nodeValue); // Output: Alice
console.log(xmlDoc.getElementsByTagName("age").[0].childNodes[0].nodeValue); // Output: 25
console.log(xmlDoc.getElementsByTagName("city").[0].childNodes[0].nodeValue); // Output: Los Angeles

Stringifying JavaScript Objects to JSON

To convert a JavaScript object into a JSON string, you use the JSON.stringify()method.

This is useful when you need to send data to a web server in JSON format. 

// JavaScript object
const user = {
  name:"Eve",
  age:28,
  city:"Chicago"
}

// Convert JavaScript object to JSON string
const jsonString= JSON.stringify(user);

console.log(jsonString) // Output: {"name":"Eve","age":28,"city":"Chicago"}

Converting XML to String in JavaScript

To convert an XML Document back to a string, you can use the XMLSerializerobject.

This is useful when you need to send XML data to a web server or store it in a file. 

// XML Document
const xmlDoc = parse.parseFromString(xmlString, "text/xml");

// Convert XML Document to string
const serializer = new XMLSerializer();
const xmlString = serializer.serializeToString(xmlDoc);

console.log(xmlString) // Output: <person><name>Alice</name><age>25</age><city>Los Angeles</city></person>

JSON vs. XML: Use Cases

JSON and XML are both used for data interchange, but they have different use cases and strengths.

JSON is typically used in web applications for its simplicity and ease of use with JavaScript.

XML is used in scenarios where document validation, namespaces, and a more verbose format are required, such as in configuration files and web services. 

// Fetching JSON data from an API
fatch("https://api.example.com/data")
  .then(response => response.Json());
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));


// Fetching XML data from an API
fatch("https://api.example.com/data")
  .then(response => response.text());
  .then(data => {
    const parser = new DOMParser();
    const xmlDoc = parse.parseFromString(data, "application/xml");
    console.log(xmlDoc.getElementsByTagName("name").[0].childNodes[0].nodeValue);
  })
  .catch(error => console.error(error));

JSON's simplicity and integration with JavaScript make it a preferred choice for modern web applications.

XML's robustness and ability to define complex document structures make it suitable for more formalized data representation and communication protocols.

Let's learn about the Web Api in the next chapter.

❮ Prev Next ❯