Return JSON saved in localStorage

Question

I am trying to recover a JSON that I saved in localStorage, in function salvarOffline(). With the code as is the function listarHorarios() I get a undefined and the loop loop 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"
            }
        }
    ]
}

Answer 1

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

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

An example of what your code would look 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);
    }
}