массив объектов: невозможно прочитать свойство 'id' неопределенного внутри события onchange

Question

Я искал способ удалить отдельный объект из массива объектов, если переменная id равна идентификатору объекта.

Я использую массив, чтобы узнать, какие флажки выбраны, так что соответствующая информация будет собираться для дальнейшей обработки.

пример: https://jsbin.com/vicerewevi/edit?html,js,output

Ошибка, которую я получаю, когда быстро устанавливаю флажки:

Uncaught TypeError: Cannot read property 'id' of undefined
    at vicerewevi.js:33
    at Function.each (jquery-3.1.0.js:368)
    at HTMLInputElement.<anonymous> (vicerewevi.js:32)
    at HTMLInputElement.dispatch (jquery-3.1.0.js:5110)
    at HTMLInputElement.elemData.handle (jquery-3.1.0.js:4918)

выше ошибка возникает в строке, если value.id == id:

// if checkbox is checked, add object to array and if unchecked remove object by 'id' from array
$('.checkbox').change( function(){

    var id = parseInt($(this).attr('data-id'))
    var foo = $(this).parent().siblings().find('#foo').val()
    var bar = $(this).parent().siblings().find('#bar').val()

    if($(this).prop('checked')) {
        var obj = {'id': id, 'foo': foo, 'bar': bar}
        jsonobjects.push(obj)
    } else {
        $.each(jsonobjects, function( index, value ) {
            if (value.id == id ) {
                jsonobjects.delete(index)
            }
        });
    }
    countChecked() // update count of checkboxes
    console.log(JSON.stringify(jsonobjects))
  $('#output').html(JSON.stringify(jsonobjects, null, ""))
});

Я нашел этот код ниже на SO (никогда раньше не работал с пользовательскими прототипами), который я пробовал:

Array.prototype.delete = function(pos){
    this[pos] = undefined;
    var len = this.length - 1;
    for(var a = pos;a < this.length - 1;a++){
      this[a] = this[a+1];
    }
    this.pop();
  }

Answer 1

Это сработало для меня, когда я попробовал решение для этого awnser Циклы For..In в JavaScript - пары ключ-значение

for (var k in jsonobjects){
    if (jsonobjects.hasOwnProperty(k)) {
        if (jsonobjects[k].id == id) {
            jsonobjects.splice(k, 1)
        }
    }
}

Answer 2

Я искал способ удалить отдельный объект из массива объектов, если переменная id равна идентификатору объекта.

const arr = [
  { id: 0 },
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 }
];

const removeById = (arr, id) => arr.filter(e => e.id !== id);

const no2 = removeById(arr, 2);
const no5 = removeById(arr, 5);

console.log(no2);
console.log(no5);

Answer 3

Используйте метод Array.filter и переназначьте jsonobjects отфильтрованному массиву, например, вместо метода удаления, который вы создали

jsonObjects = jsonObjects.filter((value, index) => { return value.id !== id; }) Я надеюсь, что это помогает

Answer 4

Поскольку вы delete вводите данные из своего массива, при следующей итерации по нему вы получите value, равное undefined для этого конкретного "пробела" в вашем массиве. Очевидно, что у него нет свойства id.

Чтобы решить эту проблему, не используйте delete, а используйте filter для создания нового отфильтрованного массива, в котором таких пробелов не будет.

Заменить:

    $.each(jsonobjects, function( index, value ) {
        if (value.id == id ) {
            jsonobjects.delete(index)
        }
    });

... с

    jsonobjects = jsonobjects.filter(function( value ) {
        return value.id !== id;
    });

Или, если вы хотите придерживаться методов jQuery, используйте $.grep:

    jsonobjects = $.grep(jsonobjects, function( value ) {
        return value.id !== id;
    });