ページをリフレッシュする前にページに保存されている以前のJSON配列の値を読み取らないようにする方法

Question

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(); 
    }); 
     } 

Answer 1

トラブルの多くの後、私は私の問題を発見しました。毎回結果を追加していました。 トラブルを起こしていたコードラインはこれでした。

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

私は、したがって、重複を避ける

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

にそれを変更しました。

Answer 2

私は私のJSONオブジェクトの2の間で比較するには、このメソッドを作った：

//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; 
    } 

}