XML JSON Integration

Converting between XML and JSON formats

🔄 XML and JSON Integration

XML and JSON are both data formats used for storing and exchanging information. Converting between them allows systems using different formats to communicate effectively, enabling seamless data integration across various platforms and applications. 


<!-- XML Format -->
<person>
  <name>John</name>
  <age>30</age>
</person>
                                    

// JSON Format
{
  "person": {
    "name": "John",
    "age": 30
  }
}

Key Differences

📝

Syntax

XML uses tags, JSON uses braces 

<!-- XML -->
<item>value</item>
// JSON
{"item": "value"}
📊

Data Types

JSON has native types 

{
  "string": "text",
  "number": 42,
  "boolean": true
}
📦

Arrays

Different array representations 

<items>
  <item>A</item>
  <item>B</item>
</items>
{"items": ["A", "B"]}
⚡

Size

JSON is more compact 

// Smaller file size
// Faster parsing
// Less bandwidth

🔹 Converting XML to JSON

XML can be converted to JSON by mapping elements to objects and attributes to properties. This conversion makes XML data accessible to JavaScript applications and modern web APIs that primarily use JSON format. 

<!-- Original XML -->
<book id="123">
  <title>Learning XML</title>
  <author>Jane Smith</author>
  <price>29.99</price>
  <inStock>true</inStock>
</book>
// Converted to JSON
{
  "book": {
    "@id": "123",
    "title": "Learning XML",
    "author": "Jane Smith",
    "price": 29.99,
    "inStock": true
  }
}

Conversion Rules:

  • XML elements become JSON objects
  • XML attributes use @ prefix
  • Text content becomes string values
  • Numbers and booleans are converted to native types

🔹 Converting JSON to XML

JSON objects can be transformed into XML elements with proper structure: 

// Original JSON
{
  "student": {
    "id": 456,
    "name": "Mike Johnson",
    "courses": ["Math", "Science", "History"],
    "graduated": false
  }
}
<!-- Converted to XML -->
<student>
  <id>456</id>
  <name>Mike Johnson</name>
  <courses>
    <course>Math</course>
    <course>Science</course>
    <course>History</course>
  </courses>
  <graduated>false</graduated>
</student>

Result:

Student Record:
ID: 456
Name: Mike Johnson
Courses: Math, Science, History
Graduated: false

🔹 JavaScript Conversion Example

Using JavaScript to convert between formats: 

// XML to JSON (using DOMParser)
const xmlString = '<person><name>Alice</name><age>25</age></person>';
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

const person = {
  name: xmlDoc.getElementsByTagName("name")[0].textContent,
  age: parseInt(xmlDoc.getElementsByTagName("age")[0].textContent)
};

console.log(person); // {name: "Alice", age: 25}

// JSON to XML (manual conversion)
const jsonData = {name: "Bob", age: 35};
const xml = `<person>
  <name>${jsonData.name}</name>
  <age>${jsonData.age}</age>
</person>`;

console.log(xml);

Console Output:

{name: "Alice", age: 25}

<person><name>Bob</name><age>35</age></person>

🔹 Complex Data Structures

Converting nested objects and arrays: 

<!-- XML with nested data -->
<company>
  <name>Tech Corp</name>
  <employees>
    <employee>
      <name>John</name>
      <role>Developer</role>
    </employee>
    <employee>
      <name>Sarah</name>
      <role>Designer</role>
    </employee>
  </employees>
</company>
// Equivalent JSON
{
  "company": {
    "name": "Tech Corp",
    "employees": [
      {
        "name": "John",
        "role": "Developer"
      },
      {
        "name": "Sarah",
        "role": "Designer"
      }
    ]
  }
}

🔹 When to Use Each Format

Use XML when:

  • Working with document-oriented data
  • Need complex validation (XSD schemas)
  • Require metadata and attributes
  • Integrating with legacy systems

Use JSON when:

  • Building web APIs and REST services
  • Working with JavaScript applications
  • Need lightweight data exchange
  • Prioritizing performance and speed

🧠 Test Your Knowledge

Which format is generally more compact?