jQuery Mobile - невозможно правильно обновить массив объектов

Question

Я испытываю то, что, по моему мнению, является логической проблемой в моем коде jQuery. Я создаю массив объектов, которые должны быть JSON.stringify'd и помещены в localStorage. Формат выглядит так:

arr = [{"name": "Some Name", "number": "1"}, {"name": "Another Name", "number": "52"} , и т. д.

На странице есть переменное количество ползунков, каждый слайдер соответствует «имени». Значение слайдера соответствует «числу». Когда слайдер обновляется, он должен обновить соответствующее «имя» обновленным номером.

У меня возникли проблемы с тем, чтобы это работало. Я могу заставить его сделать одно из двух: добавлять новый объект в массив каждый раз, когда движется ползунок. Результат: [{"name": "Some Name", "number": "1"}, {"name": "Some Name", "number": "2"}, {"name": "Some Name "," number ":" 3 "}]

ИЛИ, если я изменю вещи, я могу заставить его заменить только число и оставить имя ... пока не будет перемещен другой слайдер, после чего он стирает существующий объект и заменяет его новым объектом с использованием нового имени.

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

Прошу прощения, если это звучит сложно.

Вот мой код:

$(document).on("change", ".init_slider", function() { 
    init_val = $(this).val(); 
    char_name = $(this).parent().prev().prev().html(); 

    init_char_object.name = char_name; 
    init_char_object.initroll = init_val; 

// If the array is empty, push the object into the array 
    if (init_array.length === 0) { 
     init_array.push(init_char_object); 
    } else { 

// Check the array for the current name. If it's already there, just replace the number. 
// If it's not there, push the new object into the array. 
     $.each(init_array, function(i) { 
      if(init_array[i].name === char_name) { 
       init_array[i].initroll = init_val; // new add 
       return false; 
      } else { 
      init_array.push(init_char_object); 
      } 
     }); 

// Update localStorage with the array. 
     localStorage.setItem("_init_data", JSON.stringify(init_array));   
    } 
}); 
}); 

Извините еще раз, если это сбивает с толку. У меня такое чувство, что я делаю это намного сложнее, чем это должно быть ...

Спасибо!

Answer 1

У вас есть несколько небольших ошибок.

Вот скрипка с рабочим кодом: http://jsfiddle.net/ezanker/8q4ss/

в обработчик изменения, вы должны создать новый init_char_object каждый раз (вар init_char_object = новый Object();), а затем при проверке, если имя уже находится в массиве, вам нужно итерировать весь массив, прежде чем вставлять отсутствующее имя. Я использовал логическое имя foundInList, которое по умолчанию является ложным, и оно установлено true, только если имя найдено. Затем вне цикла, если это логическое значение все еще ложно, вы можете вставить имя. Кроме того, localStorage.setItem должен находиться за пределами IF-ELSE:

var init_array = []; 
$(document).on("change", ".init_slider", function() { 
    init_val = $(this).val(); 
    char_name = $(this).parent().prev().html(); 

    var init_char_object = new Object(); 
    init_char_object.name = char_name; 
    init_char_object.initroll = init_val; 

    if (init_array.length === 0) { 
     init_array.push(init_char_object); 
    } else { 
     var foundInList = false; 
     $.each(init_array, function(i) { 
      if(init_array[i].name === char_name) { 
       init_array[i].initroll = init_val; // new add 
       foundInList = true; 
       return false; 
      } 
     });   
     if (!foundInList){ 
      init_array.push(init_char_object); 
     } 
    } 
    localStorage.setItem("_init_data", JSON.stringify(init_array));   
});