Изменить значения нескольких текстовых полей (на основе идентификатора или типа ввода)

Question

В настоящее время у меня более 20 текстовых полей с типом ввода, равным числу, где в onload значения процесса будут установлены из базы данных. В этом процессе были случаи, когда текстовое поле устанавливало значения как «0.00». если значение равно «0,00», мне нужно заменить «0,00» пробелом. В текущей ситуации я должен проверить каждое значение каждого текстового поля из id и назначить пустое вручную. Есть ли способ ускорить этот процесс, а не ниже метод, который я пытаюсь?

Метод, который я сейчас выполняю

//Currently values will be takn from DB Through JQuery Ajax Request

//Sample JSON Returning from DB 

var value = [["SME-00150","25.25","0.00",null,"0.00",null,"0.00",null,null,"0.00","0.00",null,"0.00","0.00",null,"0.00","0.00","0.00"]];


if (value[0][1] == "0.00") {
	document.getElementById('f3a1').value = "";
} else {
	document.getElementById('f3a1').value = value[0][1]
}


if (value[0][2] == "0.00") {
	document.getElementById('f3a2').value = "";
} else {
	document.getElementById('f3a2').value = value[0][2]
}



if (value[0][6] == "0.00") {
	document.getElementById('f3a3').value = "";
} else {
	document.getElementById('f3a3').value = value[0][6]
}

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

  <input id="f3a1" type="number"  placeholder="ValueOne"> 
  <input id="f3a2" type="number"  placeholder="ValueTwo"> 
  <input id="f3a3" type="number"  placeholder="ValueThree">
  
  

Answer 1

Вы можете использовать Array.map, чтобы заменить все значения 0.00 в массиве пустыми строками, а затем использовать этот результирующий массив для заполнения элементов на вашей странице:

var value = [["SME-00150","25.25","0.00",null,"0.00",null,"0.00",null,null,"0.00","0.00",null,"0.00","0.00",null,"0.00","0.00","0.00"]];

var new_values = value.map(a => a.map(v => v == '0.00' ? '' : v));
console.log(new_values[0][1]);
document.getElementById('f3a1').value = new_values[0][1];
document.getElementById('f3a2').value = new_values[0][2];
document.getElementById('f3a3').value = new_values[0][6];

<input id="f3a1">
<input id="f3a2">
<input id="f3a3">

Answer 2

//Currently values will be takn from DB Through JQuery Ajax Request

//Sample JSON Returning from DB 

var value = [["SME-00150","25.25","0.00",null,"0.00",null,"0.00",null,null,"0.00","0.00",null,"0.00","0.00",null,"0.00","0.00","0.00"]];

if(value && value.length>0){
  value[0].foreach((val, i, arr)=>{
   let f3number = i+1;
   if (val == "0.00") {
      document.getElementById('f3a'+f3number).value = "";
    } else {
      document.getElementById('f3a'+f3number).value = val;
    }
  });
}


function clearNumberInputs(){
  let inputs = document.querySelectorAll('input[type=number]');
  for(let input of inputs){
    if(input.value == '0.00'){
      input.value = '';
    }
  }
}

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

  <input id="f3a1" type="number"  placeholder="ValueOne"> 
  <input id="f3a2" type="number"  placeholder="ValueTwo"> 
  <input id="f3a3" type="number"  placeholder="ValueThree">
  <button id="magic-buton" onclick='clearNumberInputs()'>clear</button>

Answer 3

Вы можете сгенерировать вход ids динамически и установить значение, если значение не равно 0.00. Для этого вы можете использовать forEach l oop.

Пример

   var value = [
["SME-00150", "25.25", "0.00", null, "0.00", null, "0.00", null, null, "0.00", "0.00", null, "0.00", "0.00", null, "0.00", "0.00", "0.00"]
];

value[0].forEach((val, index) => {
  document.getElementById("f3a" + (index + 1)).value = (val !== "0.00" ? val : '');
});

    <input id="f3a1" type="number" placeholder="ValueOne">
    <input id="f3a2" type="number" placeholder="ValueTwo">
    <input id="f3a3" type="number" placeholder="ValueThree">
    <input id="f3a4" type="number" placeholder="ValueOne">
    <input id="f3a5" type="number" placeholder="ValueTwo">
    <input id="f3a6" type="number" placeholder="ValueThree">
    <input id="f3a7" type="number" placeholder="ValueOne">
    <input id="f3a8" type="number" placeholder="ValueTwo">
    <input id="f3a9" type="number" placeholder="ValueThree">
    <input id="f3a10" type="number" placeholder="ValueOne">
    <input id="f3a11" type="number" placeholder="ValueTwo">
    <input id="f3a12" type="number" placeholder="ValueThree">
    <input id="f3a13" type="number" placeholder="ValueOne">
    <input id="f3a14" type="number" placeholder="ValueTwo">
    <input id="f3a15" type="number" placeholder="ValueThree">
    <input id="f3a16" type="number" placeholder="ValueOne">
    <input id="f3a17" type="number" placeholder="ValueTwo">
    <input id="f3a18" type="number" placeholder="ValueThree">