Skip to content

Commit 7d5ec63

Browse files
authored
Update 41-JSON-XML.md
1 parent fe42344 commit 7d5ec63

File tree

1 file changed

+114
-0
lines changed

1 file changed

+114
-0
lines changed

notes/English/41-JSON-XML.md

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
## JSON
2+
3+
JSON stands for JavaScript Object Notation. It is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. JSON is often used to transmit data between a server and a web application, as an alternative to XML.
4+
5+
JSON data is represented as a collection of key-value pairs, similar to an object in JavaScript. The keys are always strings, and the values can be any valid JSON data type, including strings, numbers, objects, arrays, and booleans. Here's an example of a simple JSON object:
6+
7+
```json
8+
{
9+
"name": "John Smith",
10+
"age": 30,
11+
"isStudent": true,
12+
"favoriteFoods": ["pizza", "tacos", "sushi"]
13+
}
14+
```
15+
16+
In JavaScript, you can parse a JSON string into a JavaScript object using the JSON.parse() method, like this:
17+
18+
```javascript
19+
const jsonString = '{"name": "John Smith", "age": 30, "isStudent": true, "favoriteFoods": ["pizza", "tacos", "sushi"]}';
20+
const jsonObj = JSON.parse(jsonString);
21+
console.log(jsonObj.name); // output: John Smith
22+
```
23+
24+
You can also convert a JavaScript object into a JSON string using the JSON.stringify() method, like this:
25+
26+
```javascript
27+
const obj = { name: "John Smith", age: 30, isStudent: true, favoriteFoods: ["pizza", "tacos", "sushi"] };
28+
const jsonString = JSON.stringify(obj);
29+
console.log(jsonString); // output: {"name":"John Smith","age":30,"isStudent":true,"favoriteFoods":["pizza","tacos","sushi"]}
30+
```
31+
32+
JSON is commonly used in JavaScript for exchanging data between a client and a server, as well as for storing and retrieving data in web applications. Many APIs return data in JSON format, making it easy to work with in JavaScript. JSON is also used in NoSQL databases, such as MongoDB, to store data in a document-oriented format.
33+
34+
35+
## XML
36+
37+
XML stands for eXtensible Markup Language. It is a markup language that is similar to HTML but is designed to store and transport data, rather than to display it. XML is often used as a standard format for exchanging data between different systems and applications.
38+
39+
XML data is represented as a collection of elements, similar to HTML. Each element has a start tag, an end tag, and can contain attributes and nested elements. Here's an example of a simple XML document:
40+
41+
```xml
42+
<?xml version="1.0" encoding="UTF-8"?>
43+
<bookstore>
44+
<book category="Science Fiction">
45+
<title>The Hitchhiker's Guide to the Galaxy</title>
46+
<author>Douglas Adams</author>
47+
<price>9.99</price>
48+
</book>
49+
<book category="Mystery">
50+
<title>The Da Vinci Code</title>
51+
<author>Dan Brown</author>
52+
<price>15.99</price>
53+
</book>
54+
</bookstore>
55+
```
56+
57+
In JavaScript, you can parse an XML string into a JavaScript object using the DOMParser object, like this:
58+
59+
```javascript
60+
const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
61+
<bookstore>
62+
<book category="Science Fiction">
63+
<title>The Hitchhiker's Guide to the Galaxy</title>
64+
<author>Douglas Adams</author>
65+
<price>9.99</price>
66+
</book>
67+
<book category="Mystery">
68+
<title>The Da Vinci Code</title>
69+
<author>Dan Brown</author>
70+
<price>15.99</price>
71+
</book>
72+
</bookstore>`;
73+
74+
const parser = new DOMParser();
75+
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
76+
console.log(xmlDoc.getElementsByTagName("book")[0].getAttribute("category")); // output: Science Fiction
77+
```
78+
79+
You can also convert a JavaScript object into an XML string using the XMLSerializer object, like this:
80+
81+
```javascript
82+
const books = [
83+
{category: "Science Fiction", title: "The Hitchhiker's Guide to the Galaxy", author: "Douglas Adams", price: 9.99},
84+
{category: "Mystery", title: "The Da Vinci Code", author: "Dan Brown", price: 15.99}
85+
];
86+
87+
const xmlDoc = document.createElement("bookstore");
88+
89+
books.forEach(book => {
90+
const bookElem = document.createElement("book");
91+
bookElem.setAttribute("category", book.category);
92+
93+
const titleElem = document.createElement("title");
94+
titleElem.textContent = book.title;
95+
96+
const authorElem = document.createElement("author");
97+
authorElem.textContent = book.author;
98+
99+
const priceElem = document.createElement("price");
100+
priceElem.textContent = book.price;
101+
102+
bookElem.appendChild(titleElem);
103+
bookElem.appendChild(authorElem);
104+
bookElem.appendChild(priceElem);
105+
106+
xmlDoc.appendChild(bookElem);
107+
});
108+
109+
const serializer = new XMLSerializer();
110+
const xmlString = serializer.serializeToString(xmlDoc);
111+
console.log(xmlString);
112+
```
113+
114+
XML is commonly used in JavaScript for exchanging data between a client and a server, as well as for storing and retrieving data in web applications. It is often used in SOAP web services, which use XML messages to exchange information between different systems. However, JSON has become more popular in recent years due to its simplicity and smaller file sizes.

0 commit comments

Comments
 (0)