JSON (JavaScript Object Notation)

This is pretty simple, use JSON.parse() to parse a JSON string into a JavaScript object. This method takes a single argument, which is the JSON string to be parsed, and returns the corresponding JavaScript object.

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

However, you may want to wrap that in a try/catch in case the JSON string isn't valid, like so:

try {
    let jsonString = '{name:"John", "age":30, "city":"New York"}';
    let jsObject = JSON.parse(jsonString);
} catch (error) {
    console.log(error);
}

JSON.stringify() will do the trick here. It will convert a JavaScript object into a JSON string. This method takes a single argument, which is the JavaScript object to be converted, and returns the corresponding JSON string.

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

The JSON.stringify() method also accepts two additional arguments which are super handy:

1 - A replacer function that can be used to filter-out values, to transform the values, or to add values.

2 - The number of spaces to use for indentation when pretty-printing the JSON.

let jsObject = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(jsObject, null, 2);
console.log(jsonString);

This will output:

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

There are more than a few ways to do this:

1 - Dot notation to access the value of a property by its name:

let jsObject = {name: "John", age: 30, city: "New York"};
console.log(jsObject.name); // Output: "John"

2 - Bracket notation to access the value of a property by its name:

let jsObject = {name: "John", age: 30, city: "New York"};
console.log(jsObject["name"]); // Output: "John"

3 - A for-in loop to access the properties and values of a JSON object:

let jsObject = {name: "John", age: 30, city: "New York"};
for (let key in jsObject) {
    if (jsObject.hasOwnProperty(key)) {
        console.log(key + " -> " + jsObject[key]);
    }
}

4 - The Object.entries() method to get an array of key-value pairs of an object and then you can use a for-of loop to access them:

let jsObject = {name: "John", age: 30, city: "New York"};
for (let [key, value] of Object.entries(jsObject)) {
    console.log(key + " -> " + value);
}

5 - If you know the key name of the property you want to access, you can use the Object.keys() method to get an array of the keys of an object and then you can use the array index to access the specific key:

let jsObject = {name: "John", age: 30, city: "New York"};
let keys = Object.keys(jsObject);
console.log(jsObject[keys[0]]); // Output: "John"

If the object does not have the property you're trying to access, it will return undefined instead of an error.

1 - To add a new key-value pair, you can use the dot notation or the bracket notation and assign a value to it:

// dot notation
let jsObject = {name: "John", age: 30, city: "New York"};
jsObject.gender = "male"; 
console.log(jsObject); // Output: {name: "John", age: 30, city: "New York", gender: "male"}

// bracket notation
let jsObject = {name: "John", age: 30, city: "New York"};
jsObject["address"] = "New York"; 
console.log(jsObject); // Output: {name: "John", age: 30, city: "New York", address: "New York"}

2 - To remove a key-value pair, you can use the delete operator:

// dot notation
let jsObject = {name: "John", age: 30, city: "New York"};
delete jsObject.age; 
console.log(jsObject); // Output: {name: "John", city: "New York"}

// bracket notation
let jsObject = {name: "John", age: 30, city: "New York"};
delete jsObject["city"]; 
console.log(jsObject); // Output: {name: "John", age: 30}

If you try to delete a property that does not exist in the object, the delete operator will have no effect. Also when you delete a property, it will not only remove the key-value pair but also the key, so it will return undefined if you try to access it again.

You can also use Object.assign() method to merge two or more objects together:

let jsObject = {name: "John", age: 30, city: "New York"};
let newObject = {gender: "male", address: "New York"}
Object.assign(jsObject, newObject); 
console.log(jsObject); // Output: {name: "John", age: 30, city: "New York", gender: "male", address: "New York"}

Or, use the spread operator (...) to merge two objects together:

let jsObject = {name: "John", age: 30, city: "New York"};
let newObject = {gender: "male", address: "New York"}
let finalObject = {...jsObject, ...newObject};
console.log(finalObject); // Output: {name: "John", age: 30, city: "New York", gender: "male", address: "New York"}

Pretty neat, huh? Keep in mind that if an object has a property with the same key as the object being merged, the value will be overwritten.

1 - Use a for...in loop. This type of loop iterates over the properties of an object, and you can use the Object.hasOwnProperty() method to check if the property belongs to the object.

let jsObject = {name: "John", age: 30, city: "New York"};
for (let key in jsObject) {
    if (jsObject.hasOwnProperty(key)) {
        console.log(key + " -> " + jsObject[key]);
    }
}

2 - Use the Object.keys() method along with a for...of loop. The Object.keys() method returns an array of the object's own enumerable property names.

let jsObject = {name: "John", age: 30, city: "New York"};
let keys = Object.keys(jsObject);
for (let key of keys) {
    console.log(key + " -> " + jsObject[key]);
}

3 - You can also use the Object.entries() method along with a for...of loop. The Object.entries() method returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop.

let jsObject = {name: "John", age: 30, city: "New York"};
for (let [key, value] of Object.entries(jsObject)) {
    console.log(key + " -> " + value);
}

4 - Use the forEach() method of the Object.keys() method to loop through the keys of the object.

let jsObject = {name: "John", age: 30, city: "New York"};
Object.keys(jsObject).forEach(function(key) {
    console.log(key + " -> " + jsObject[key]);
});

5 - Use the forEach() method of the Object.entries() method to loop through the key-value pairs of the object.

let jsObject = {name: "John", age: 30, city: "New York"};
Object.entries(jsObject).forEach(([key, value]) => {
    console.log(key + " -> " + value);
});

The order of the elements in the JSON object may not be preserved while looping through the key-value pairs in some engines such as javascript, it's always good to use Object.entries() or Object.keys() to loop through the key-value pairs in a JSON object.