Skip to content

Commit c331e33

Browse files
LinusBwanaLinusBwana
committed
Learnt how to work with JSON: stringify, parse, fetch, and localStorage with examples and console outputs
1 parent 4d07ad5 commit c331e33

4 files changed

Lines changed: 317 additions & 0 deletions

File tree

‎JSON/README.md‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# Working with JSON in JavaScript
2+
This project is a basic demonstration of how to use **JSON (JavaScript Object Notation)** in JavaScript. I used this to learn how to:
3+
- Convert JavaScript data (arrays and objects) to JSON strings using *JSON.stringify()*
4+
- Convert JSON strings back into JavaScript data using *JSON.parse()*
5+
- Fetch JSON data from a file using *fetch()*
6+
- SSave and retrieve JSON data using the browser's *local storage*
7+
8+
## I demostrated my understanding as illustrated in the examples below
9+
### Converting JavaScript to JSON String using *JSON.stringify()*
10+
I converted an array of names to a JSON string using *JSON.stringify()*. This is useful for saving or sending the data.
11+
12+
#### Example 1: Array to JSON string
13+
```javascript
14+
const names = ["Linus", "Melvin", "Sandra", "Laura"];
15+
const namesString = JSON.stringify(names);
16+
console.log(namesString);
17+
```
18+
19+
#### Console Output
20+
```javascript
21+
["Linus","Melvin","Sandra","Laura"]
22+
```
23+
24+
#### Example 2: Object to JSON string
25+
I converted a single person object into a JSON string.
26+
```javascript
27+
const person = {
28+
"name": "Linus",
29+
"age": 29,
30+
"isEmployed": false
31+
}
32+
const personString = JSON.stringify(person);
33+
console.log(personString);
34+
```
35+
36+
#### Console Output
37+
```javascript
38+
{"name":"Linus","age":29,"isEmployed":false}
39+
```
40+
41+
#### Example 3: Array of objects to JSON string
42+
I converted an array of multiple people objects into a JSON string.
43+
```javascript
44+
const people = [
45+
{ "name": "Linus", "age": 29, "isEmployed": false },
46+
{ "name": "Laura", "age": 25, "isEmployed": false },
47+
{ "name": "Lawrence", "age": 35, "isEmployed": false },
48+
{ "name": "Sandra", "age": 19, "isEmployed": false }
49+
];
50+
51+
const peopleString = JSON.stringify(people);
52+
console.log(peopleString);
53+
```
54+
55+
#### Console Output
56+
```javascript
57+
[{"name":"Linus","age":29,"isEmployed":false},{"name":"Laura","age":25,"isEmployed":false},{"name":"Lawrence","age":35,"isEmployed":false},{"name":"Sandra","age":19,"isEmployed":false}]
58+
```
59+
60+
### Converting JSON String to JavaScript using *JSON.parse()*
61+
#### Example 1: JSON string (array) to JavaScript array
62+
I turned a JSON string back into a normal JavaScript array using *JSON.parse()*.
63+
```javascript
64+
const jsonNames = `["Linus", "Melvin", "Sandra", "Laura"]`;
65+
const parsedNames = JSON.parse(jsonNames);
66+
console.log(parsedNames);
67+
Console Output:
68+
```
69+
70+
#### Console Output
71+
```javascript
72+
[ 'Linus', 'Melvin', 'Sandra', 'Laura' ]
73+
```
74+
75+
#### Example 2: JSON string (object) to JavaScript object
76+
I turned a JSON string into a regular JavaScript object.
77+
```javascript
78+
const jsonPerson = `{
79+
"name": "Linus",
80+
"age": 29,
81+
"isEmployed": false
82+
}`;
83+
const parsedPerson = JSON.parse(jsonPerson);
84+
console.log(parsedPerson);
85+
```
86+
87+
#### Console Output
88+
```javascript
89+
{ name: 'Linus', age: 29, isEmployed: false }
90+
```
91+
92+
#### Example 3: JSON string (array of objects) to JavaScript array
93+
I converted a JSON string of people into a usable JavaScript array of objects.
94+
95+
```javascript
96+
const jsonPeople = `[{
97+
"name": "Linus",
98+
"age": 29,
99+
"isEmployed": false
100+
},
101+
{
102+
"name": "Laura",
103+
"age": 25,
104+
"isEmployed": false
105+
},
106+
{
107+
"name": "Lawrence",
108+
"age": 35,
109+
"isEmployed": false
110+
},
111+
{
112+
"name": "Sandra",
113+
"age": 19,
114+
"isEmployed": false
115+
}]`;
116+
const parsedPeople = JSON.parse(jsonPeople);
117+
console.log(parsedPeople);
118+
```
119+
120+
#### Console Output:
121+
```javascript
122+
[
123+
{ name: 'Linus', age: 29, isEmployed: false },
124+
{ name: 'Laura', age: 25, isEmployed: false },
125+
{ name: 'Lawrence', age: 35, isEmployed: false },
126+
{ name: 'Sandra', age: 19, isEmployed: false }
127+
]
128+
```
129+
130+
### Fetching JSON Data using fetch()
131+
I fetched a JSON file and displayed each object using *.forEach()*. I learnt how *fetch()* returns a promise and how *.then()* works
132+
```javascript
133+
fetch("people.JSON")
134+
.then(response => response.json())
135+
.then(value => value.forEach((person) => {
136+
console.log(person);
137+
}));
138+
```
139+
140+
The *people.JSON* file contained:
141+
```javascript
142+
[
143+
{ "name": "Linus", "age": 29, "isEmployed": false },
144+
{ "name": "Laura", "age": 25, "isEmployed": false },
145+
{ "name": "Lawrence", "age": 35, "isEmployed": false },
146+
{ "name": "Sandra", "age": 19, "isEmployed": false }
147+
]
148+
```
149+
150+
#### Console Output:
151+
```javascript
152+
{ name: 'Linus', age: 29, isEmployed: false }
153+
{ name: 'Laura', age: 25, isEmployed: false }
154+
{ name: 'Lawrence', age: 35, isEmployed: false }
155+
{ name: 'Sandra', age: 19, isEmployed: false }
156+
```
157+
158+
### Saving and Retrieving JSON from Local Storage
159+
#### Saving to Local Storage
160+
I converted a car array to a JSON string and saved it to local storage with the key "*carsToJSON*".
161+
```javascript
162+
const cars = ["mazda", "BMW", "Auris", "Volvo"];
163+
const carsToJSON = JSON.stringify(cars);
164+
localStorage.setItem("carsToJSON", carsToJSON);
165+
```
166+
167+
#### Retrieving from Local Storage
168+
I retrieved the JSON string from local storage and converted it back into a normal JavaScript array.
169+
```javascript
170+
const savedCars = localStorage.getItem("carsToJSON");
171+
const JSONToCars = JSON.parse(savedCars);
172+
console.log(JSONToCars);
173+
```
174+
175+
#### Console Output:
176+
```javascript
177+
[ 'mazda', 'BMW', 'Auris', 'Volvo' ]
178+
```
179+
180+
## What I learnt
181+
- How to convert JavaScript data to JSON using *JSON.stringify()*
182+
- How to convert JSON strings back to JavaScript using *JSON.parse()*
183+
- How to use *fetch()* to get JSON data from a file
184+
- How to store and retrieve JSON data in the browser's local storage

‎JSON/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>JSON</title>
7+
</head>
8+
<body>
9+
<script src="index.js"></script>
10+
</body>
11+
</html>

‎JSON/index.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// JSON{JavaScript Object Notation} data-interchange format
2+
// Used for exchanging data betwee a server and a web application
3+
// JSON files {key: value} or [value1, value2, value3]
4+
// JSON.stringify converts a JSON object to a JSON string
5+
// JSON.parse converts a JSON string to a JSON object
6+
7+
8+
// converting JSON object to JSON String
9+
const names = ["Linus", "Melvin", "Sandra", "Laura"];
10+
const namesString = JSON.stringify(names);
11+
console.log(namesString);
12+
13+
14+
const person = {
15+
"name": "Linus",
16+
"age": 29,
17+
"isEmployed": false
18+
}
19+
const personString = JSON.stringify(person);
20+
console.log(personString);
21+
22+
23+
const people = [{
24+
"name": "Linus",
25+
"age": 29,
26+
"isEmployed": false
27+
},
28+
{
29+
"name": "Laura",
30+
"age": 25,
31+
"isEmployed": false
32+
},
33+
{
34+
"name": "Lawrence",
35+
"age": 35,
36+
"isEmployed": false
37+
},
38+
{
39+
"name": "Sandra",
40+
"age": 19,
41+
"isEmployed": false
42+
}];
43+
44+
const peopleString = JSON.stringify(people);
45+
console.log(peopleString);
46+
47+
48+
// converting JSON String to JSON object
49+
const jsonNames = `["Linus", "Melvin", "Sandra", "Laura"]`;
50+
const parsedNames = JSON.parse(jsonNames);
51+
console.log(parsedNames);
52+
53+
54+
const jsonPerson = `{
55+
"name": "Linus",
56+
"age": 29,
57+
"isEmployed": false
58+
}`
59+
const parsedPerson = JSON.parse(jsonPerson);
60+
console.log(parsedPerson);
61+
62+
63+
const jsonPeople = `[{
64+
"name": "Linus",
65+
"age": 29,
66+
"isEmployed": false
67+
},
68+
{
69+
"name": "Laura",
70+
"age": 25,
71+
"isEmployed": false
72+
},
73+
{
74+
"name": "Lawrence",
75+
"age": 35,
76+
"isEmployed": false
77+
},
78+
{
79+
"name": "Sandra",
80+
"age": 19,
81+
"isEmployed": false
82+
}]`;
83+
const parsedPeople = JSON.parse(jsonPeople);
84+
console.log(parsedPeople);
85+
86+
// Using Fetch
87+
fetch("people.JSON")
88+
.then(response => response.json())
89+
.then(value => value.forEach((person) => {
90+
console.log(person);
91+
}));
92+
93+
94+
// Saving to local storage;
95+
const cars = ["mazda", "BMW", "Auris", "Volvo"];
96+
const carsToJSON = JSON.stringify(cars);
97+
localStorage.setItem("carsToJSON", carsToJSON);
98+
99+
// retrieving from Local Storage
100+
const savedCars = localStorage.getItem("carsToJSON");
101+
const JSONToCars = JSON.parse(carsToJSON);
102+
console.log(JSONToCars);

‎JSON/people.JSON‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
[{
2+
"name": "Linus",
3+
"age": 29,
4+
"isEmployed": false
5+
},
6+
{
7+
"name": "Laura",
8+
"age": 25,
9+
"isEmployed": false
10+
},
11+
{
12+
"name": "Lawrence",
13+
"age": 35,
14+
"isEmployed": false
15+
},
16+
{
17+
"name": "Sandra",
18+
"age": 19,
19+
"isEmployed": false
20+
}]

0 commit comments

Comments
 (0)