Создание al oop вместо копирования / вставки кода снова и снова

Question

Я знаю, что определенно есть лучший способ сделать это, но я не могу понять это. Я знаю, что мне нужно создать al oop, но это все:

function loadData() {
  var getInput1 = localStorage.getItem("input1")
  var parsedInput1 = JSON.parse(getInput1)
  $("#planner-input-1").val(parsedInput1)
  //--------------------------------------

  var getInput2 = localStorage.getItem("input2")
  var parsedInput2 = JSON.parse(getInput2)
  $("#planner-input-2").val(parsedInput2)
  //--------------------------------------

  var getInput3 = localStorage.getItem("input3")
  var parsedInput3 = JSON.parse(getInput3)
  $("#planner-input-3").val(parsedInput3)
  //--------------------------------------

// etc etc etc...

Answer 1

Вы можете перебирать индексы от 1 до любого количества, которое у вас есть, и объединять его с input для поиска соответствующего свойства на localStorage:

function loadData(){
  for (let i = 1; i < 10; i++) {
    const parsed = JSON.parse(localStorage.getItem("input" + i));
    $("#planner-input-" + i).val(parsed);
  }
}

Но было бы лучше реструктурировать ваши данные и HTML - вместо этого использовать массив в локальном хранилище и использовать классы вместо идентификаторов, так что вы можете сделать что-то вроде этого:

function loadData(){
  const inputs = document.querySelectorAll('.planner-input');
  const parsedArr = JSON.parse(localStorage.getItem("inputs"));
  inputs.forEach((input, i) => {
    input.value = parsedArr[i];
  });
}

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

Answer 2

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

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

function loadItem(dataId, selector) {
  var parsedInput = JSON.parse(dataId)
  $("selector").val(parsedInput)
}

function loadData() {
  var itemsToProcess = [{
      dataId: input1,
      selector: '#planner-input-1'
    },
    {
      dataId: input2,
      selector: '#planner-input-2'
    },
    {
      dataId: input3,
      selector: '#planner-input-3'
    }
  ]


  itemsToProcess.forEach(function(item) {
    loadItem(item.dataId, item.selector);
  })
  // OR
  for (let item of items) {
    loadItem(item.dataId, item.selector);
  }
}

Answer 3

Запустите for l oop от 1 до n

function loadData(){
    for (let i = 1; i < 10; i++) {
      const val = JSON.parse(localStorage.getItem("input" + i));
      $("#planner-input-" + i).val(val);
    }
}

Вот рабочая демонстрация