Objetos JSON: la notación de objetos JavaScript (JSON) es un formato de intercambio legible por humanos basado en texto que se utiliza para representar objetos y estructuras de datos simples en código basado en navegador web.
Los objetos JavaScript solo pueden existir dentro del lenguaje JavaScript, por lo que cuando trabaja con datos a los que se debe acceder desde varios lenguajes, es mejor consultar JSON.
Reglas para declarar un objeto:
- El objeto siempre se define dentro de las llaves { }.
- Los objetos se escriben en pares de claves.
- Las claves deben ser strings y sus valores deben ser un tipo de datos JSON válido.
Los tipos de datos JSON pueden ser número, string, objeto, booleano, array o nulo. - Las claves y los valores están separados por dos puntos («:»).
- Cada par de clave o valor está separado por una coma.
myOrder = {};
Ejemplo:
myOrder = {
"name of product" : "earbuds",
"cost" : "799",
"warranty" : "1 year"
};
Acceder a valores de objetos:
- Se puede acceder a los valores del objeto utilizando la notación de punto («.»).
- También podemos acceder a los objetos usando la notación de paréntesis ([]).
Ejemplo 1: En el siguiente programa estamos accediendo al objeto usando “.” notación.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GFG</h2>
<p id="objectaccessing"></p>
<script>
var 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
document.getElementById(
"objectaccessing").innerHTML = i;
</script>
</body>
</html>
Salida: 
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GFG</h2>
<p id="Accessingobj"></p>
<script>
var myOrder, i;
myOrder = {
"name_of_product": "earbuds",
"cost": "799",
"warranty": "1 year"
};
// Accessing object using [] notation
i = myOrder["name_of_product"];
document.getElementById(
"Accessingobj").innerHTML = i;
</script>
</body>
</html>
Producción:
Anidamiento de objetos en JSON: los objetos se pueden anidar dentro de otros objetos que tengan una ruta de acceso única. En el mismo documento, el mismo nombre de campo puede aparecer en objetos anidados. El nombre de acceso debe ser único. En definitiva, los objetos anidados se definirán o asignarán en otros objetos.
Ejemplo:
myOrder = {
"name of product" : "earbuds",
"cost" : "799",
"warranty" : {
"warranty1" : "6 months",
"warranty2 : "12 months"
}
};
En el ejemplo anterior, hemos declarado otro objeto dentro del objeto.
Nota: Incluso podemos acceder a los objetos anidados usando la notación de punto («.»).
Ejemplo:
i = myOrder.warranty.warranty2;
o
i = myOrder.warranty[warranty2];
Modificar valores de objeto: Para modificar los valores, tenemos dos formas.
- Los valores del objeto se pueden modificar usando una notación de punto («.»).
- Los valores del objeto se pueden modificar usando la notación de corchetes («[ ]»).
Ejemplo para el primero:
myOrder.warranty.warranty2 = "3 months";
Ejemplo para el segundo:
i = myOrder.warranty[warranty2] = "3 months";
Eliminar propiedades del objeto: podemos eliminar las propiedades del objeto JSON utilizando la palabra clave «eliminar».
Ejemplo:
delete myOrder.warranty.warranty2;
Bucle de un objeto: el bucle se puede hacer de dos maneras:
- El bucle de un objeto se puede realizar mediante el uso de una propiedad bucle for-in.
- Para hacer un bucle de un objeto, incluso podemos usar corchetes («[]») en la propiedad de bucle for-in.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GFG</h2>
<p id="AccessingObj"></p>
<script>
var myOrder, a;
myOrder = {
"name of product": "earbuds",
"cost": "799", "warranty": "1 year"
};
for (a in myOrder) {
// Accessing loop object
// using dot notation
document.getElementById(
"AccessingObj").innerHTML
+= a + "<br>";
}
</script>
</body>
</html>
Producción:
myObj = {
"name of product" : "earbuds",
"cost" : "799",
"warranty" : "1 year"
};
for (a in myOrder) {
document.getElementById(
"Accessingobj").innerHTML = a;
}
En este ejemplo anterior, estamos tratando de mostrar solo el objeto.
Ejemplo 2: En el siguiente ejemplo, estamos accediendo a un objeto en bucle usando la notación corchete[].
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GFG</h2>
<p id="Accessingobj"></p>
<script>
var myOrder, a;
myOrder = {
"name_of_product": "earbuds",
"cost": "799",
"warranty": "1 year"
};
for (a in myOrder) {
// Accesing object in looping
// using bracket notation
document.getElementById(
"Accessingobj").innerHTML
+= myOrder[a] + "<br>";
}
</script>
</body>
</html>
Producción:
myObj = {
"name of product" : "earbuds",
"cost" : "799",
"warranty" : "1 year"
};
for (a in myOrder) {
document.getElementById("Accessingobj")
.innerHTML = myOrder[a];
}
Publicación traducida automáticamente
Artículo escrito por kadiummanisha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA