從數組中刪除對象

Question

正在嘗試從JavaScript對象內的數組列表中刪除對象。

對象的結構：

{
    "temp": {
        "name": "",
        "css": {
            "bg_color_main": "#xxxxx",
            "part_bg_color": "xxxxx",
            "txt_font_family": "xxxxxxxx",
            "txt_font_color_main": "#xxxxx",
            "headline_font_family": "xxxxx",
        },
        "part": [
            {
                "name": "xxxxxx",
                "style": {}
            },
            {
                "name": "yyyyyy",
                "style": {}
            },
            {
                "name": "zzzzzz",
                "style": {}
            }
        ]
    }
}

編碼：

$.each(jsonData.temp.part, function(k, v) {
     var tt = this; //var tt = $(this)
     if( v.name === partName ){
          delete tt[k];
     }
});

什么都沒有發生..沒有錯誤，沒有警告！

Answer 1

您的代碼中有兩個問題。 首先， delete不會刪除元素。 只會將它們設置為undefined。 請改用splice 。

其次，它永遠都做不到，因為tt （或this ）是您當前正在處理的數組內的對象，而不是您要迭代的數組。 您需要使用其全名來顯式訪問該數組。

$.each(jsonData.temp.part, function(k, v) {
  var tt = this; //var tt = $(this)
  if( v.name === partName ){
    jsonData.temp.part.splice(k,1);
  }
});

Answer 2

或者，您可以簡單地使用過濾器。

var o = {
    "temp": {
        "name": "",
        "css": {
            "bg_color_main": "#xxxxx",
            "part_bg_color": "xxxxx",
            "txt_font_family": "xxxxxxxx",
            "txt_font_color_main": "#xxxxx",
            "headline_font_family": "xxxxx",
        },
        "part": [
            {
                "name": "xxxxxx",
                "style": {}
            },
            {
                "name": "yyyyyy",
                "style": {}
            },
            {
                "name": "zzzzzz",
                "style": {}
            }
        ]
    }
}

o.temp.part = o.temp.part.filter(function (element) {return element.name !== "zzzzzz"});

Answer 3

您可以使用其他方法，例如：

如果不需要該數組的引用，則可以使用reduce來創建一個新數組：

jsonData.temp.part = jsonData.temp.part.reduce(function(acc, value) {
    if( value.name !== partName ){
          acc.push(value);
     }
     return acc;
}, []);

您還可以找到元素的索引，並使用splice維護引用：

var indexElement = jsonData.temp.part.reduce(function(acc, value, index) {
    if( value.name !== partName ){
          return index;
     }
     return acc;
}, -1);

jsonData.temp.part.splice(indexElement, 1)

兩種方式都可以。

Answer 4

這是一個可能的解決方案：

最簡單的方法是使用刪除。

 var jsonData = { "temp": { "name": "", "css": { "bg_color_main": "#xxxxx", "part_bg_color": "xxxxx", "txt_font_family": "xxxxxxxx", "txt_font_color_main": "#xxxxx", "headline_font_family": "xxxxx", }, "part": [ { "name": "xxxxxx", "style": {} }, { "name": "yyyyyy", "style": {} }, { "name": "zzzzzz", "style": {} } ] } } var nameToRemove = 'xxxxxx'; var parts = jsonData.temp.part; $.each(parts, function(k, v) { if (v.name === nameToRemove) { delete parts[k]; } }); //this code is added to just show the result $.each(parts, function(i, r){ if (r != undefined) { $('#result').append(r.name + ',') } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label id="result"></label> 

Answer 5

您創建了一個副本並從副本中刪除了項目。

$.each(jsonData.temp.part, function(k, v) {
    var tt = this; // now you created a new array!!!
    if( v.name === partName ){
         delete tt[k]; // here you delete the item from the copy array
         delete this[k]; // you remove item from the original array
    }
});