Значения флажка из локального хранилища при редактировании формы

Question

Я сохранил значения из html-формы в localStorage, и я возвращаю данные из localStorage, чтобы сформировать для редактирования.Установленные значения флажков (MaterialName) сохраняются в localStorage в виде массива.Исходные значения флажков поступают из базы данных через ajax.Что мне нужно сделать, чтобы эти значения в localStorage соответствовали значениям из базы данных, и чтобы их снова проверяли при редактировании формы?Или это вообще возможно?

// localstorage value
{
  "FormID": 150,
  "CreateDate": "2019-09-17T00:00:00",
  "FormFiller": "JOkuMuu",
  "CustomerName": "Wsoy",
  "CustomerContact": "Masa",
  "WorkName": "Lajitelmapakkaus",
  "ReadyToDate": "2019-09-19T00:00:00",
  "Instructions": "Tarkasta kirjat ",
  "Amount": 50,
  "MaterialName": "Xpohja,Tarra"
}

Это функция для получения всех материалов из базы данных:

function addMaterials(material) {
  $MaterialName.append('<input type="checkbox" value="' + material.MaterialName + '">' + material.MaterialName + ' </input>');
}
$.ajax({
  type: 'GET',
  url: '/api/materials',
  dataType: 'json',
  success: function(materials) {
    $.each(materials, function(i, material) {
      addMaterials(material);
    });
  },
  error: function() {
    alert: ('Virhe ladattaessa')
  }
});

Это функция, которую я пытался получить, чтобы проверенные значения были перепроверены:

$(function() {
  //bring data from localStorage
  var lsdata = JSON.parse(localStorage.getItem('key'));
  //put data to form
  $('#formid').val(lsdata.FormID);
  $('#createdate').val(lsdata.CreateDate);
  $('#formfiller').val(lsdata.FormFiller);
  $('#customerlist').empty().append(lsdata.CustomerName.split(',').map(c => new Option(c, c)));
  $('#contact').val(lsdata.CustomerContact);
  $('#worklist').empty().append(lsdata.WorkName.split(',').map(c => new Option(c, c)));
  $('#readytodate').val(lsdata.ReadyToDate);
  $('#instructions').val(lsdata.Instructions);
  $('#amount').val(lsdata.Amount);
  $('#materiallist').append('<input type="checkbox" checked>' + lsdata.MaterialName + ' </input>');
});

Все остальное работает, кроме MaterialName.Это добавляет новое значение с Xpohja, Tarra.Я хочу добавить «проверено» к этим Xpohja и Tarra, а не новое значение.

Answer 1

Присвойте каждому флажку идентификатор с тем же именем materiaName, как показано ниже:

<input type="checkbox" name="vehicle" value="Bike" id="Xpohja">Xpohja <br>
<input type="checkbox" name="vehicle" value="Car" id="Tarra">Tarra<br>

Теперь, когда вы выбираете значение из localStorage для редактирования формы, вы можете преобразовать строку json в карту или массив ипереберите его, чтобы установить проверенный атрибут, как показано ниже:

$('#id').attr('checked', true)

Answer 2

var lsdata = JSON.parse(localStorage.getItem('key'));
var chkArray = lsdata.MaterialName.split(',');
for(var i = 0; i < chkArray.length; i++){
   $('input[type="checkbox"]').find('[value="'+ chkArray[i] +'"]').attr('checked', true)
}

Answer 3

У меня недостаточно репутации, чтобы оставлять комментарии, но вы хотите сказать, что вы хотите, чтобы значение флажка было установлено на «Xpohja, Tarra»?Или вы хотите два новых флажка?Один с «Xpohja», а другой с «Таррой»?

Я оставил решение ниже, если вы хотели установить флажок со значениями.

var lsdata = "Xpohja,Tarra";
 
$('#materiallist').append('<input type="checkbox" checked> </input>');

$('#materiallist input').val(lsdata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="materiallist"></div>