Return JSON saved in localStorage

Question

Return JSON saved in localStorage

Navigation

#1 by (3 votes)

2

I'm trying to retrieve a JSON that I've saved in localStorage, in the salvarOffline() function. With code like the listarHorarios() function I get a undefined and the loop repetition does not work. My code:

function salvarOffline(data) {
    window.localStorage.setItem("horariosOffline", JSON.stringify(data));
}

function listarHorarios() {
    listaFormatada = JSON.parse(localStorage.getItem('horariosOffline'));
    var tabelaHorarios = document.querySelector('.horarios');
    for(var i = 0; i < listaFormatada.horarios.length; i++) {
        var linhaHorario = document.createElement('tr');
        linhaHorario.innerHTML = 
        '<td class="mdl-data-table__cell--non-numeric">' + listaFormatada[i].linha + '</td>' +
        '<td class="mdl-data-table__cell--non-numeric">' + listaFormatada[i].partida + '</td>' +
        '<td class="mdl-data-table__cell--non-numeric"><strong>' + listaFormatada[i].chegada + '</strong></td>';

        tabelaHorarios.appendChild(linhaHorario);
    }
}

The structure of my JSON is:

{
    "horarios": [
        {
            "id": 1,
            "linha": "Avenida",
            "horario": {
                "partida": "7:20",
                "chegada": "7:40"
            }
        },
        {
            "id": 2,
            "linha": "St. Antônio | Avenida | S. Sebastião",
            "horario": {
                "partida": "7:25",
                "chegada": "8:00"
            }
        }
    ]
}

javascript json localstorage

asked by anonymous 24.03.2018 / 06:20

1 answer

How to separate the digits of a variable in C # in pairs? How do you "remember" an action on a site?

score 3 · Accepted Answer

The array in question is horarios and not listaFormatada , so the correct one would be to call listaFormatada.horarios[i] .

Another thing is that JSON has a nested object, so the values of partida and chegada are on a second level of the object, you would have to add the key horario where these values are.

An example of what your code looks like:

var json = {
    "horarios": [
        {
            "id": 1,
            "linha": "Avenida",
            "horario": {
                "partida": "7:20",
                "chegada": "7:40"
            }
        },
        {
            "id": 2,
            "linha": "St. Antônio | Avenida | S. Sebastião",
            "horario": {
                "partida": "7:25",
                "chegada": "8:00"
            }
        }
    ]
}

function salvarOffline(data) {
    window.localStorage.setItem("horariosOffline", JSON.stringify(data));
}

function listarHorarios() {
   json = JSON.stringify(json);
    listaFormatada = JSON.parse(json);
    var tabelaHorarios = document.querySelector('.horarios');
    for(var i = 0; i < listaFormatada.horarios.length; i++) {
        var linhaHorario = document.createElement('tr');
        linhaHorario.innerHTML = 
        '<td class="mdl-data-table__cell--non-numeric">' + listaFormatada.horarios[i].linha + '</td>' +
        '<td class="mdl-data-table__cell--non-numeric">' + listaFormatada.horarios[i].horario.partida + '</td>' +
        '<td class="mdl-data-table__cell--non-numeric"><strong>' + listaFormatada.horarios[i].horario.chegada + '</strong></td>';

        tabelaHorarios.appendChild(linhaHorario);
    }
}

listarHorarios();

<table class="horarios"></table>

Your original code corrected:

function listarHorarios() {
    listaFormatada = JSON.parse(localStorage.getItem('horariosOffline'));
    var tabelaHorarios = document.querySelector('.horarios');
    for(var i = 0; i < listaFormatada.horarios.length; i++) {
        var linhaHorario = document.createElement('tr');
        linhaHorario.innerHTML = 
        '<td class="mdl-data-table__cell--non-numeric">' + listaFormatada.horarios[i].linha + '</td>' +
        '<td class="mdl-data-table__cell--non-numeric">' + listaFormatada.horarios[i].horario.partida + '</td>' +
        '<td class="mdl-data-table__cell--non-numeric"><strong>' + listaFormatada.horarios[i].horario.chegada + '</strong></td>';

        tabelaHorarios.appendChild(linhaHorario);
    }
}