Leer archivo Json

1

Tengo una pagina desarrollada con elementor, en la misma mostraba dos tablas, una es mercados de cereal y la otra cotizaciones de monedas, los datos los levanto de url Json y lo estaba mostrando con el plugin visualizer, en su version free, despues de unos 3 meses dejo de mostrar los datos y le pide pasar a una version pro. Alguien sabe de algun plugin free para mostrar Json o tiene un codigo para leer el archivo y meterlo a una tabla? gracias.

2

Hola Alejandro, te dejo un codigo que te pueden llegar a servir, tendrias que acomodarlo al JSON que estas recibiendo, desconozco los campos que tiene.

const URL = "http://..."; //URL DEL JSON

// funcion para crear la tabla
const crearTabla = (data)=>{
    
    const table = document.createElement('table');

    // armo la cabecera de la tabla
    const tHead = document.createElement('thead');
    const tRow = document.createElement('tr');

    const primeraFila = data[0];

    // armo los th de la tabla
    for (const key in primeraFila) {
        // separo el id para que quede oculto, no se incluye en el front end
        if (key != 'id') {
            const th = document.createElement('th');
            const texto = document.createTextNode(`${key}`);
            th.appendChild(texto);
            tRow.appendChild(th);
        }         
    }

    tHead.appendChild(tRow);
    table.appendChild(tHead);

    // resto de la tabla

    const tBody = document.createElement('tbody');

    data.forEach(element => {
        
        const tr = document.createElement('tr');

        for (const key in element) {
            const td = document.createElement('td');
            if (key == 'id') {
                // agrego el id a la fila
                tr.setAttribute('data-id', element[key]);
            }else{
                const contenido = document.createTextNode(element[key]);
                td.appendChild(contenido);
                tr.appendChild(td);
            }
        }
        tBody.appendChild(tr);

    });

    table.appendChild(tBody);

    // en tu HTML necesitas tener un div con un id que se llame 'tabla'
    const $divTabla = document.getElementById('tabla');
    $divTabla.appendChild(table);

};

// funcion para traer los datos y enviarlos a la tabla
const getDatosFetch = ( url ) => {
    // por default, fetch hace un get. Retorna una promesa
    fetch( url )
    .then( (res) => {
        if( res.ok ){
            return res.json();
        }
        else{
            return Promise.reject(res);
        }
    })
    .then( (data) => {
        //console.log(data);
        crearTabla(data);
    } )
    .catch( (err) =>{
        console.error(err.status, err.statusText);
    })
};

// llamada a la funcion con el evento load
window.addEventListener('load', ()=>{
    getDatosFetch(URL);
});
1 me gusta