Ultima revisión 15/03/2023

Generando dinámicamente JSON-LD

El estándar JSON-LD (JavaScript Object Notation for Linked Data), es una recomendación del W3C (World Wide Web Consortium) que pretende ayudar a la codificación de datos vinculados a través del lenguaje de anotación JSON.

Estos datos vinculados son una forma de crear una red de datos interpretables basados en estándares de diferentes documentos y sitios web que permitan que una aplicación establezca los datos vinculados y enlaces incrustados a otras partes de los datos vinculados que están alojados en diferentes sitios de la Web.

La idea para diseñar este estándar nació de la necesidad de proporcionar un "contexto" que permitiese proporcionar asignaciones adicionales a un modelo RDF a través de un documento propio o mediante un archivo separado y referenciado desde diferentes documentos a partir de documentos JSON con cabecera HTTP Link.

Dicho esto, la generación de datos estructurados puede depender de otros recursos o herramientas como Tag Manager y, si este es el caso, el JSON-LD estático no será una opción, fundamentalmente, porque varios o muchos de esos datos que se desean incorporar al JSON no pueden ser insertados antes de cargar la página.

Para solucionar este problema lo que se puede hacer es crear un proceso en JavaScript que incorpore las declaraciones JSON-LD tras la carga del documento mediante una función de tipo "ready" o en un evento "onload". Es decir, algo como:

<script type="text/javascript"
    (function(){
        // Código a ejecutar
    })(document);

    // O mediante onload
    window.onload = function(){
        // Código a ejecutar
    } 
</script>

Dentro de este código de JavaScript, sustituiremos la línea comentada por un JSON con valores reemplazables. Es decir, algo como:

<script type="text/javascript"
    var data = '{\
        "@context": "http://schema.org",\
        "@type": "Organization",\
        "name": "__ENTERPRISE__",\
        "url": "__URL__",\
    }';
</script>

Posteriormente, lo que deberemos hacer es una función que reemplace todas las cadenas dinámicas por su correspondiente valor actual, independientemente de su lugar de procedencia. Por ejemplo, podríamos hacer algo como:

<script type="text/javascript"
    var arr = ['__ENTERPRISE__', '__URL__', '__LOGO__'];
    var val = ['Islavisual', 
               'https://www.islavisual.com',
               'https://www.islavisual.com/images/logo.png'];

    for(var idx in arr){
        data = data.replace(arr[idx], val[idx]);
    }
</script>

Es evidente que si los valores están en una herramienta como Tag Manager, el array de VAL y su oportuno VAL[idx] deberían ser reemplazados por su código correspondiente.

Una vez tengamos construido el JSON y disponible en memoria, lo que se debe hacer es inyectar un nuevo script en el elemento HEAD de la página. Es decir, algo similar a:

var script = document.createElement('script');
    script.type = "application/ld+json";
    script.innerHTML = data;
 
document.getElementsByTagName('head')[0].appendChild(script);

Por tanto, el código a insertar en nuestra página quedará:

<script type="text/javascript"
    (function(){
        var data = '{\
            "@context": "http://schema.org",\
            "@type": "Organization",\
            "name": "__ENTERPRISE__",\
            "url": "__URL__",\
        }';

        var arr = ['__ENTERPRISE__', '__URL__', '__LOGO__'];
        var val = ['Islavisual', 
                   'https://www.islavisual.com',
                   'https://www.islavisual.com/images/logo.png'];

        for(var idx in arr){ data = data.replace(arr[idx], val[idx]); }

        var script = document.createElement('script');
        script.type = "application/ld+json";

        script.innerHTML = data;
        document.getElementsByTagName('head')[0].appendChild(script);
    })(document);
</script>

Trabajar con JSON en JavaScript

Creación de JSON

La forma más frecuente de crear o definir un objeto JSON es a través de dos llaves:

// Declaración de un JSON vacío
var persona = {};
 
// Declaración de un JSON con datos de una persona
var persona = {
    nombre: 'Pablo',
    apellido: 'Fernández',
    estatura: 1.60,
    edad: 18,
    trabaja: true
}

Sin embargo, también es posible crearlo a través de su constructor:

var persona = JSON.constructor()
persona.nombre = 'Pablo';
persona.apellido = 'Fernández';
persona.estatura = 1.60;
persona.edad = 18;

Acceso a elementos de un JSON

Para acceder a sus elementos podemos hacerlo a través de sus propiedades en formato objeto o en formato array:

console.log(persona['nombre']);          // Devuelve 'Pablo
console.log(persona.edad);               // Devuelve 18'

Al igual que pasa con el objeto Array, si el JSON está formado por un array de JSON su índice inicial será CERO, por tanto, para acceder a su último elemento deberemos acceder a su longitud menos uno.

Inserción y almacenamiento de elementos en un JSON

Para almacenar una nueva propiedad a un JSON, también podemos hacerlo en formato objeto o en formato array:

persona.talla = "S"
persona['nombre'] = "Elena";

Eliminación de elementos de un JSON

Para eliminar un elemento de un objeto array podemos utilizar la instrucción delete que elimina y reemplaza el elemento en el objeto donde se aplica.

delete(persona.talla)
console.log(persona);
 
// Devolverá lo siguiente:
{
    apellido: "Fernández"
    edad: 18
    estatura: 1.6
    nombre: "Elena"
    trabaja: true
    ► __proto__: Object
};

Envío y recepción de JSON

Los JSON son unos objetos con los que trabajamos de manera muy frecuente. Tanto es así, que incluso se les utiliza para enviar y recibir información al servidor o comunicarse con APIs, entre otras muchas posibilidades.

Dado que un JSON es también un objeto en JavaScript, este, hereda las propiedades y métodos propios del objeto como son el constructor, hasOwnProperty o toString.

Lo más normal es que, cuando se desea enviar información al servidor, el objeto que contiene esa información, sea transformado a un tipo String para que luego, en el servidor, pueda ser reconstruida y manipulada.

En lo referente a la recepción, lo habitual, es que el objeto que contiene esa información, venga en formato String. Sin embargo, puede ser convertido a un tipo concreto de objeto nada más ser recibido y, así, poder manipular dicha información.

Cuando se trata de JSON, en el proceso de envío y recepción, lo que se suele hacer es recurrir a los métodos stringify y parse.

Método stringify

La sentencia stringify convierte un objeto analizable en una cadena de texto de tipo JSON.

Por ejemplo, uno de los usos más frecuentes de esta instrucción es utilizarla para almacenar datos en la memoria intermedia o para transferir datos entre el cliente y el servidor.

var objeto = {
    texto: 'valor',
    digito: 1
}
 
JSON.stringify(objeto);    // Devolverá '{"texto":"valor","digito":1}'

Si el JSON está mal formado, en el método stringify, se provocará un error al intentar convertirlo a formato texto de JSON y devolverá un error de "Error de sintaxis".

Método parse

La sentencia parse convierte una cadena de texto de tipo JSON en un objeto analizable por JavaScript.

Por ejemplo, uno de los usos más frecuentes de esta instrucción es utilizarla para recuperar datos de la memoria intermedia o del servidor y, así, poder validar alguna propiedad.

var cadena = '{"texto":"valor","digito":1}'
var objeto = JSON.parse(cadena);

// Devolverá un String lo siguiente:
{
    texto: "valor"
    digito: 1
    ► __proto__: Object
};

console.log(objeto.texto); // Devolverá "valor"

Si el JSON está malformado, en el método parse, se provocará un error al intentar convertirlo a formato analizable y devolverá un error de "Error de sintaxis".

De momento, esto es todo. Un abrazo y hasta más vernos.