は、私はjQueryので移植されている選択ボックスを持っているjqueryの

Question

との選択ボックスを移入することはできません。オプションには、REST呼び出しを介してサーバから取得され、その後、選択ボックスを移入するために使用されています。

アプリケーションもオフラインで動作するようになっているが、オフライン時にこれらのREST呼び出しは失敗します。だから私がやっているのは、RESTの呼び出しが実際に通り過ぎるときに、これらの値をlocalStorageの中に保存し、オフラインでREST呼び出しが失敗したときに、localStorage内に格納された値を取得して、

は、しかし、選択ボックスは空のまま表示されます。私はコンソールに格納された値を表示し、実際に正常に格納され、取り出されたところで、これらの値が表示されます。なぜ私の選択ボックスがまだ空に見えるのか分かりません。

$.getJSON("/openmrs/ws/rest/v1/location", function(result) { 
    var locations = $("#identifierLocations"); 

    localStorage.setItem("locations", result.results); 

    $.each(result.results, function() { 
    locations.append($("<option />").val(this.uuid).text(this.display)); 
    }); 
}).fail(function(jqXHR, textStatus, errorThrown) { 
    var data = localStorage.getItem("locations"); 

    if (data) { 
    var locations = $("#identifierLocations"); 

    for (var i = 0; i < data.length; i++) { 
     locations.append($("<option />").val(data[i].uuid).text(data[i].display)); 
    } 
    } 
}); 

私は.fail()内console.logを使用し、私はそのデータが実際に保存されているすべての場所のオブジェクトを持っていますが、なぜ私の選択ボックスが空のまま表示されない確認することができます。 localStorageは文字列だけを保持することができるので

Answer 1

問題があります。あなたはそれらを取得するときdeserialiseそして、それらを格納する前にresult.resultsをシリアル化する必要があります。試してみてください：

$.getJSON("/openmrs/ws/rest/v1/location", function(result) { 
    localStorage.setItem("locations", JSON.stringify(result.results)); 
    populateLocations(result.results); 
}).fail(function(jqXHR, textStatus, errorThrown) { 
    var data = localStorage.getItem("locations"); 
    if (data) { 
    populateLocations(JSON.parse(data)); 
    } 
}); 

function populateLocations(locations) { 
    var html = locations.map(function(o) { 
    return '<option value="' + o.uuid + '">' + o.display + '</option>'; 
    }).join(''); 
    $("#identifierLocations").html(html); 
}