如何获取更新的对象

Here is the problem, I do an Ajax request on a file which represents an array of objects, then I update each objects one by one in the array, then I store the array in localStorage with a JSON.stringify. After doing all that, in the console I get the array with updated objects but when I store the array, it's the old array that is stored.

这是问题，我在一个代表一个对象数组的文件上做一个Ajax请求，然后我在数组中逐个更新每个对象，然后我用一个JSON.stringify将数组存储在localStorage中。在完成所有这些之后，在控制台中我获得了具有更新对象的数组，但是当我存储数组时，它是存储的旧数组。

Here is my code.

这是我的代码。

var relaisList;
function updateRelaisList(){
    $.ajax({
        "dataType":"json",
        "url": "assets/json/relaisList.json"
    })
    .done(function(response){
        console.log("ajax updatedRelaisList SUCCESS");
        //add lat and lng for all relaisList objects
        for(var i = 0, c = response.length; i < c; i++){
            addLatLng(response[i]);
        }
        //store the updated array in the localStorage
        console.log("below is the updatedRelaisList>>>")
        console.log(response)
        relaisList = response
        window.localStorage.setItem("foo", JSON.stringify(relaisList))  


    })
    .fail(function(){
        console.log("ajax updateRelaisList FAIL");
    })
}

function addLatLng(obj){
    var fullAddress = obj.name + "," + obj.address + "," + obj.zip;
    $.ajax({
        "dataType":"json",
        "url": "https://maps.googleapis.com/maps/api/geocode/json?address=" + fullAddress + "&key=AIzaSyB67tGq_pe2p6ma3QVlkciQaL4-rKIC_UE"
    })
    .done(function(response){
        console.log("ajax addLatLng SUCCESS");
        //update the object adding 2 properties lat and lng
        obj.lat = response.results[0].geometry.location.lat;
        obj.lng = response.results[0].geometry.location.lng;
        // console.log(obj)
    })
    .fail(function(){
        console.log("ajax addLatLng FAIL");
    })  
}

Feel free to ask me more details

随意问我更多细节

1 个解决方案

#1

Could you please try with below modified code. This code will wait for all Ajax responses and will upload data to local storage only when all lat/long gets fetched from google maps:

您能否尝试使用以下修改过的代码。此代码将等待所有Ajax响应，并且只有在从谷歌地图获取所有纬度/经度时才会将数据上传到本地存储：

var relaisList;
function updateRelaisList(){
    $.ajax({
        "dataType":"json",
        "url": "assets/json/relaisList.json"
    })
    .done(function(response){
        console.log("ajax updatedRelaisList SUCCESS");
        addLatLng(response);
     })
    .fail(function(){
        console.log("ajax updateRelaisList FAIL");
    })
}

function addLatLng(response){
    var updatedResponse =[];
    //add lat and lng for all relaisList objects
    for(var i = 0, c = response.length; i < c; i++){
        obj = response[i];
        var fullAddress = obj.name + "," + obj.address + "," + obj.zip;
        $.ajax({
            "dataType":"json",
            "url": "https://maps.googleapis.com/maps/api/geocode/json?address=" + fullAddress + "&key=AIzaSyB67tGq_pe2p6ma3QVlkciQaL4-rKIC_UE"
        })
        .done(function(response_inner){
            console.log("ajax addLatLng SUCCESS");
            //update the object adding 2 properties lat and lng
            obj.lat = response_inner.results[0].geometry.location.lat;
            obj.lng = response_inner.results[0].geometry.location.lng;
            updatedResponse.push(obj);
            if(updatedResponse.length == response.length){
                //store the updated array in the localStorage
                console.log("below is the updatedRelaisList>>>")
                console.log(response)
                relaisList = response
                window.localStorage.setItem("foo", JSON.stringify(relaisList));  
            }
        })
        .fail(function(){
            console.log("ajax addLatLng FAIL");
        })  

    }


}