Oggetti di visualizzazione JavaScript
Come visualizzare oggetti JavaScript?
La visualizzazione di un oggetto JavaScript produrrà [oggetto oggetto] .
Esempio
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Alcune soluzioni comuni per visualizzare gli oggetti JavaScript sono:
- Visualizzazione delle proprietà dell'oggetto per nome
- Visualizzazione delle proprietà dell'oggetto in un ciclo
- Visualizzazione dell'oggetto utilizzando Object.values()
- Visualizzazione dell'oggetto utilizzando JSON.stringify()
Visualizzazione delle proprietà dell'oggetto
Le proprietà di un oggetto possono essere visualizzate come una stringa:
Esempio
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Visualizzazione dell'oggetto in un ciclo
Le proprietà di un oggetto possono essere raccolte in un ciclo:
Esempio
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Devi usare person[x] nel loop.
person.x non funzionerà (perché x è una variabile).
Utilizzo di Object.values()
Qualsiasi oggetto JavaScript può essere convertito in un array usando Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray è ora un array JavaScript, pronto per essere visualizzato:
Esempio
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values() è supportato in tutti i principali browser dal 2016.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Utilizzo di JSON.stringify()
Qualsiasi oggetto JavaScript può essere stringato (convertito in una stringa) con la funzione JavaScript
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString è ora una stringa JavaScript, pronta per essere visualizzata:
Esempio
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Il risultato sarà una stringa che segue la notazione JSON:
{"name":"John","age":50,"city":"New York"}
JSON.stringify() è incluso in JavaScript e supportato in tutti i principali browser.
Stringi le date
JSON.stringify converte le date in stringhe:
Esempio
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Funzioni di stringa
JSON.stringify non stringerà le funzioni:
Esempio
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Questo può essere "risolto" se si convertono le funzioni in stringhe prima di stringere.
Esempio
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Stringi gli array
È anche possibile stringere array JavaScript:
Esempio
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Il risultato sarà una stringa che segue la notazione JSON:
["Giovanni","Pietro","Sally","Jane"]