如何避免在页面刷新之前读取存储在页面中的先前 JSON 数组值答案

【问题标题】：How to avoid reading previous JSON array value which are stored in page before page refresh如何避免在页面刷新之前读取存储在页面中的先前 JSON 数组值
【发布时间】：2017-04-07 04:43:56
【问题描述】：

我想避免读取之前推送到 JSON 数组中的对象。如图所示。我正在自学这些概念。所以我需要帮助，关于这是添加和读取值的正确方法吗？

我也不知道如何从技术上问这个问题。所以如果有人能告诉我应该如何问这个问题，我将不胜感激。这样我至少可以改进它以便更好地理解。

JQUERY

    $("#click").click(function(event)   
    {
    event.preventDefault();
    var $form = $('#myform');
    var $boxes =$("input[id=myCheckboxes]:checked").length;
    if($boxes==0)
    {
    alert("Choose atleast one Category");
    }
    else if($form.valid() && $boxes>0) 
    { 
    //if form is valid action is performed
    var data = $( "#myform" ).serializeArray();//serialize the data
    var valuesArray = $('input:checkbox:checked').map( function() {
        return this.value;
    }).get().join(",");
    data.push({ name: 'panel', value: valuesArray});
    //convert json array into object
    var loginFormObject = {};
    $.each(data,
        function(i, v) {
            loginFormObject[v.name] = v.value;
        });
    array.push(loginFormObject);
    alert("Added Successfully");
    viewFunction(array);
    return false;
    }
    })
    //view function
    function viewFunction(array)
    {
    console.log(array);
    var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance","Court Programs"];
    var ul_block = $("<ul/>");
    $.each(array, function(i, data) 
    {
        var panels = data.panel.split(",");
        var uli_block = $("<ul/>");
        $.each(panels, function(j, jdata)
        {
            var ulii_block = $("<ul/>");
            $edit = $('<a/>').attr('href', 'javascript:;').addClass('btn btn-default active').attr('role', 'button').text('Edit')
                     .css('margin-left', 5);
            $del = $('<a/>').addClass('btn btn-default active').attr('role', 'button').text('Delete')
                     .css('margin-left', 5);
            $(ulii_block).append($("<li/>").html(data.ptitle).append($edit,$del));
            $(uli_block).append($("<li/>").html('<span class="Collapsable">'+panel_arr[panels[j]]+'</span>')).append(ulii_block);
            $edit.click(editFunction.bind(null, data));//bind data to function
        });
        $(ul_block).append($("<li/>").html('<span class="Collapsable">'+data.gpanel+'</span>').append(uli_block));
    });
    $("#addMember").append(ul_block);
    $(".Collapsable").click(function () {
      $(this).parent().children().toggle();
      $(this).toggle();
    });
    $(".Collapsable").each(function(){
      $(this).parent().children().toggle();
      $(this).toggle();
    });
      }

【问题讨论】：

标签： javascript jquery json

【解决方案1】：

我用这个方法来比较我的两个 json 对象：

//tempObj is old object and newObj is well your new JSON, this function returns bool
function isDifferentObj(tempObj, newObj) {
    var tempObjLength = Object.keys(tempObj).length;
    var newObjLength = Object.keys(newObj).length;
    if (newObjLength >= tempObjLength) {
        for (var key in newObj) {
            if (typeof tempObj[key] != "undefined") {
                if (newObj[key] != tempObj[key]) {
                    return true;
                }
            } else {
                return true;
            }

        }
        return false;
    } else {
        for (var key in tempObj) {
            if (typeof newObj[key] != "undefined") {
                if (tempObj[key] != newObj[key]) {
                    return true;
                }
            } else {
                return true;
            }

        }
        return false;
    }

}

【讨论】：

感谢您的努力，但解决方案很简单。我每次都附加我的结果。所以导致重复。我已经发布了我的答案。

【解决方案2】：

经过很多麻烦，我发现了我的问题。我每次都在附加结果。造成麻烦的代码行是这样的。

 $("#addMember").append(ul_block);

我改成

 $("#addMember").html(ul_block);

因此避免重复。

【讨论】：