Objetos de visualización de JavaScript
¿Cómo mostrar objetos de JavaScript?
Mostrar un objeto JavaScript generará [object Object] .
Ejemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Algunas soluciones comunes para mostrar objetos de JavaScript son:
- Mostrar las propiedades del objeto por nombre
- Visualización de las propiedades del objeto en un bucle
- Mostrar el objeto usando Object.values()
- Mostrar el objeto usando JSON.stringify()
Visualización de propiedades de objetos
Las propiedades de un objeto se pueden mostrar como una cadena:
Ejemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Mostrar el objeto en un bucle
Las propiedades de un objeto se pueden recopilar en un bucle:
Ejemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Debes usar person[x] en el bucle.
person.x no funcionará (porque x es una variable).
Usando Object.values()
Cualquier objeto de JavaScript se puede convertir en una matriz usando Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArrayahora es una matriz de JavaScript, lista para mostrarse:
Ejemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values()es compatible con todos los principales navegadores desde 2016.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Usando JSON.stringify()
Cualquier objeto de JavaScript se puede convertir en cadena (convertir en una cadena) con la función de JavaScript
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myStringahora es una cadena de JavaScript, lista para mostrarse:
Ejemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
El resultado será una cadena siguiendo la notación JSON:
{"nombre":"Juan","edad":50,"ciudad":"Nueva York"}
JSON.stringify() está incluido en JavaScript y es compatible con todos los principales navegadores.
Cadena de fechas
JSON.stringify convierte las fechas en cadenas:
Ejemplo
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Funciones de cadena
JSON.stringify no encadenará funciones:
Ejemplo
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Esto se puede "arreglar" si convierte las funciones en cadenas antes de convertirlas en cadenas.
Ejemplo
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Matriz de cadenas
También es posible encadenar arreglos de JavaScript:
Ejemplo
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
El resultado será una cadena siguiendo la notación JSON:
["Juan","Peter","Sally","Jane"]