JavaScript JSON Objects Examples
Example 1: Here, is an example of creating simple JSON Object.
const person = {
"name": "John",
"age": 30,
"city": "New York"
};
Explanation:
{ }
– Curly braces define the object."name"
,"age"
,"city" -
These are the keys (properties) of the object. Keys are always strings."John"
,30
,"New York" -
These are the corresponding values associated with each key.: -
Colon(:) separates keys and values., -
Comma(,) separates different key-value pairs within the object.
2. Accessing JSON Object Values
- The object values can be accessed by using the dot (“.”) notation.
- We can also access objects by using bracket([]) notation.
Example: In the below program we are accessing the object using “.” notation.
let myOrder, i;
// Object is created with name myOrder
myOrder = {
"name_of_the_product": "Earbuds",
"cost": "799",
"warranty": "1 year "
};
// Accessing for particular detail
// from object myOrder
i = myOrder.name_of_the_product;
// It prints the detail of name
// of the product
console.log(i);
Output
Earbuds
Explanation: The JavaScript code defines an object `myOrder` with properties like product name, cost, and warranty. It accesses the product name and assigns it to `i`. Finally, it logs the product name “Earbuds” to the console.
3. Looping through JSON Object
Looping can be done in two ways –
- Looping of an object can be done by using a property for-in loop.
- For looping an object we can even use brackets (“[]”) in the for-in loop property.
Example: In the below example we are accessing a looping object using bracket[] notation.
let myOrder, a;
myOrder = {
"name_of_product": "earbuds",
"cost": "799",
"warranty": "1 year"
};
for (a in myOrder) {
// Accessing object in looping
// using bracket notation
console.log(myOrder[a]);
}
Output
earbuds 799 1 year
Explanation: The code initializes an object `myOrder` with product details. It iterates over each property using a `for-in` loop. Within the loop, it accesses each property value using bracket notation and logs them to the console. This prints the values of “earbuds”, “799”, and “1 year”.
4. Converting a JSON Text to a JavaScript Object
To convert a JSON text to a JavaScript object, you can use the JSON.parse()
method.
Example: This example converts the JSON to JavaSctipt Object.
const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: John
console.log(jsonObject.age); // Output: 30
Output
John 30
Explanation:
JSON.parse()
parses a JSON string, constructing the JavaScript value or object described by the string.- In the example,
jsonString
is a JSON-formatted string. JSON.parse(jsonString)
converts the JSON string into a JavaScript object, which is stored in the variablejsonObject
.- You can access properties of the JavaScript object
jsonObject
just like any other JavaScript object.
JavaScript JSON Objects
JSON (JavaScript Object Notation) is a handy way to share data. It’s easy for both people and computers to understand. In JavaScript, JSON helps organize data into simple objects. Let’s explore how JSON works and why it’s so useful for exchanging information.
JSON object Syntax:
const jsonData = {
"key1" : "value1",
...
};