Common Data Formats in JavaScript: A Comprehensive Guide With Examples

In JavaScript, several data formats are commonly used to structure and exchange data. These formats help ensure that data is represented in a standard way, making it easy to work with and transmit between different systems, APIs, or applications.

Here are the most common data formats in JavaScript:

1. JSON (JavaScript Object Notation)

JSON is the most widely used data format for sending and receiving data in web applications, especially when communicating with APIs.

Structure: JSON is a lightweight, text-based format that represents data as key-value pairs. It can represent objects, arrays, strings, numbers, booleans, and null.
Usage: JSON is commonly used for data exchange between a client (e.g., a web browser) and a server.
Example:

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science"]
}

Working with JSON in JavaScript:
Parsing JSON: Convert a JSON string into a JavaScript object using JSON.parse().

let jsonString = '{"name": "John", "age": 30}';
let parsedData = JSON.parse(jsonString);
console.log(parsedData.name);  // Output: John

Stringifying JSON: Convert a JavaScript object into a JSON string using JSON.stringify().

let obj = { name: "John", age: 30 };
let jsonString = JSON.stringify(obj);
console.log(jsonString);  // Output: '{"name":"John","age":30}'

2. XML (eXtensible Markup Language)
XML is another common data format used for data storage and exchange, especially in legacy systems and some APIs.

Structure: XML uses a hierarchical structure with nested tags. Each tag can contain text or other tags, and attributes can be used for additional metadata.
Usage: XML was more popular before JSON became the preferred format. It is still used in some older APIs and data formats (e.g., RSS feeds).
Example:

<person>
  <name>John</name>
  <age>30</age>
  <isStudent>false</isStudent>
  <courses>
    <course>Math</course>
    <course>Science</course>
  </courses>
</person>

Working with XML in JavaScript:
You can parse XML data in JavaScript using the DOMParser object.

let xmlString = `<person><name>John</name><age>30</age></person>`;
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString, "text/xml");

let name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
console.log(name);  // Output: John

3. CSV (Comma-Separated Values)
CSV is a simple text format used to represent tabular data, where each row represents a record and each column is separated by a comma.

Structure: Each line of the CSV represents one row of data, and values in each row are separated by commas. CSV files typically don’t support nested data like JSON or XML.
Usage: CSV is commonly used for exporting and importing data, especially for spreadsheets, databases, or simple text-based data storage.
Example:

name,age,isStudent
John,30,false
Alice,25,true

Working with CSV in JavaScript:
You can parse CSV data manually or use libraries like PapaParse for more complex use cases.

let csvData = "name,age,isStudent\nJohn,30,false\nAlice,25,true";
let rows = csvData.split("\n").map(row => row.split(","));
console.log(rows);  // Output: [["name", "age", "isStudent"], ["John", "30", "false"], ["Alice", "25", "true"]]

Read the rest of the article here:
https://medium.com/@CodingAdventure/common-data-formats-in-javascript-a-comprehensive-guide-with-examples-3b5546ce0517