JavaScript: gestire i metadati degli elementi con JSON e gli attributi di dati

In JavaScript possiamo sfruttare il formato JSON e gli attributi di dati per inserire e leggere i metadati degli elementi.

Possiamo aggiungere i metadati in questo modo:

<article class="post" data-meta='{"author": "Gabriele Romanato", "date": "2020-12-08"}'></article>

Si noti che abbiamo usato apici singoli per racchiudere la stringa JSON in modo da evitare problemi nel parsing HTML. Possiamo leggere questi dati come segue:

'use strict';

document.querySelectorAll('.post').forEach(post => {
    let meta = JSON.parse(post.dataset.meta);
    let { author, date } = meta;
    console.log(author, date);
});