Signatur
Beschreibung
Die Methode toJSON() der Schnittstelle ContactAddress ist der Standard-Serialisierer dieser Schnittstelle. Sie gibt ein einfaches JavaScript-Objekt zurück, das die Werte aller Eigenschaften der Adresse enthält: addressLine, city, country, dependentLocality, organization, phone, postalCode, recipient, region und sortingCode.
ContactAddress-Objekte bekommt man über die Contact Picker API. Man ruft dazu navigator.contacts.select() mit der Eigenschaft 'address' auf. Die Adressen sind Plattform-Objekte, deren Werte über Getter auf dem Prototyp bereitgestellt werden. Deshalb würden Object.keys() oder der Spread-Operator ein leeres Ergebnis liefern. toJSON() löst dieses Problem und liefert ein Objekt mit echten, eigenen Eigenschaften.
Normalerweise ruft man toJSON() nicht selbst auf. JSON.stringify() erkennt die Methode und nutzt sie automatisch. Ein direkter Aufruf ist sinnvoll, wenn man ein einfaches Objekt braucht, etwa zum Speichern in IndexedDB, zum Weitergeben per postMessage() oder für den Spread-Operator.
Rückgabewert
addressLine (string[]), city, country, dependentLocality, organization, phone, postalCode, recipient, region und sortingCode (jeweils string, oft leer).Beispiele
Adresse auswählen und mit JSON.stringify serialisieren
const button = document.querySelector('#kontakt-waehlen');
button.addEventListener('click', async () => {
if (!('contacts' in navigator)) {
console.warn('Contact Picker API wird nicht unterstützt');
return;
}
const supported = await navigator.contacts.getProperties();
if (!supported.includes('address')) return;
const [contact] = await navigator.contacts.select(['name', 'address']);
const [address] = contact?.address ?? [];
if (address) {
// JSON.stringify ruft intern address.toJSON() auf
console.log(JSON.stringify(address, null, 2));
}
});toJSON() direkt aufrufen, um ein einfaches Objekt zu erhalten
const pickAddress = async () => {
const [contact] = await navigator.contacts.select(['address']);
const address = contact?.address?.[0];
if (!address) return null;
console.log(Object.keys(address)); // [] – Getter liegen auf dem Prototyp
const plain = address.toJSON();
console.log(Object.keys(plain));
// Jetzt funktioniert auch der Spread-Operator
return { ...plain, source: 'contact-picker' };
};
document.querySelector('#btn').addEventListener('click', pickAddress);Lieferadresse an den Server senden
document.querySelector('#lieferadresse').addEventListener('click', async () => {
try {
const contacts = await navigator.contacts.select(['address'], { multiple: false });
const address = contacts[0]?.address?.[0];
if (!address) return;
const response = await fetch('/api/lieferadresse', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ address }) // toJSON() wird automatisch genutzt
});
console.log('Gespeichert:', response.ok);
} catch (err) {
console.error('Auswahl abgebrochen oder fehlgeschlagen:', err.name);
}
});// Wichtig · Fallstricke
- Experimentell und kaum unterstützt: Die Contact Picker API gibt es nur in Chromium-Browsern auf Android (Chrome 80+, Samsung Internet). Desktop-Browser, Firefox und Safari (ohne Experimental-Flag) unterstützen sie nicht. Prüfe daher immer vorher mit
'contacts' in navigatorund mitnavigator.contacts.getProperties(). navigator.contacts.select()funktioniert nur in einem sicheren Kontext (HTTPS), nur im obersten Frame und nur nach einer Nutzeraktion, etwa einem Klick. Sonst wird das Promise zurückgewiesen.- Viele Felder sind oft leere Zeichenketten, weil das Adressbuch sie nicht enthält.
addressLineist immer ein Array. - Datenschutz: Adressen sind personenbezogene Daten. Speichere oder übertrage sie nur mit ausdrücklicher Einwilligung und nur über HTTPS.
- Das zurückgegebene Objekt ist eine Momentaufnahme. Änderungen daran wirken sich nicht auf das ursprüngliche
ContactAddress-Objekt aus.