Как я могу использовать DOM Create Element, чтобы сделать существующий код более динамичным и кратким?

Question

Я создал утилиту, которая собирает входные данные пользователей, а затем загружаю данные в виде файла YAML. Формат данных очень специфичен, и поэтому мне пришлось создавать данные и взламывать пробелы, чтобы привести их в надлежащий формат. Этот код работает до тех пор, пока Number of Chais = 2, теперь проблема в том, что если число элементов увеличивается, скажем, до 10 или 20, то код будет настолько громоздким и будет занимать много памяти. Следовательно, может кто-нибудь сказать мне, как я могу использовать DOM Create Elements, чтобы сделать эту утилиту более динамичной c? Прикрепление кода, где данные форматируются. Прикрепление всего кода в скрипте, поскольку весь код здесь не подходит. Любая помощь очень ценится

document.addEventListener('DOMContentLoaded', function() {
        const extra = {};

        const oForm = document.forms.myForm;
        const oSave = document.querySelector('input[name="save"]');
        const oSub = document.querySelector('input[name="submit"]');
        const oCtrl = document.querySelector('select[name="controller"]');
        const oTest = document.querySelector('select[name="test"]');
        const oProto = document.querySelector('select[name="protocol"]');
        const oiSCSI = document.querySelector('select[name="iSCSIip"]');
        //const oTmp = document.getElementsByClassName("tabcontent")
        const oTmp = document.getElementById("extra")

//formatting Data according to the contstraints of Controllers, 
var step = oForm.chassis.value;

    let payload = '';
    //Creating the data elements to be cpatured in the downloaded yaml file 

    for (let i = 0; i < step; i++) {
    //  console.log('Walking east one step');

        payload+= '\n -  # UUT ' + i + ' configuration'+'\n    -  # Chassis ' + i + ' configuration'+ String.fromCharCode(10);

        const addToPayload = (object, whitespace) => {

        for (const key of Object.keys(object)) {
            payload += key + '\n';
            const details = object[key];
            for (const key1 of Object.keys(details)){
            const value = details[key1];
            str=value[0];
            com=value[2];
            val=value[1];
            whitespace=value[3];
            var input= JSON.stringify(val);

    }   
        }
        }

    if((document.getElementById("ip1").disabled || document.getElementById("ip2").disabled) && oForm.ctrls.value==1){
    if(i==0){
    let data = {
        "   PDU:": {
          "PDU_IP":['       PDU_IP',' '+ oForm.ip.value,"   #PDU IP",'  '+'\n'],
          "PDU_LEFT":['     PDU_LEFT',[oForm.lo.value]," # left_outlet(s) ",'   '+'\n'],
          "PDU_RIGHT":['        PDU_RIGHT',[oForm.ro.value]," # right_outlet(s) ", '    '+'\n']
        },  
        "   \n  CONTROLLER: # Controller settings ": {          
            "Controller_ID#1": ["       -  # Controller A for RBOD/EBOD"],
            "Netmask IP_A":["           MC_IP",' '+document.getElementById('mc_ip').value,'  # RBOD MC IP',''+'\n'],
            "MC_Netmask_A": ["          MC_Netmask",' '+document.getElementById('netmask_ip1').value,'  # RBOD MC Netmask',''+'\n'],
            'MC_Gateway_A':['           MC_Gateway',' '+document.getElementById('gateway_ip1').value,'  # RBOD MC Gateway',''+'\n'],
            'MC_A': ['          MC',' '+document.getElementById('rbod_mc1').value,'  # RBOD MC port',''+'\n'],
            'SC_A':['           SC',' '+document.getElementById('rbod_sc1').value,'  # RBOD SC port',''+'\n'],
            'FU_A':['           FU',' '+document.getElementById('rbod_fu1').value,'  # RBOD FU port',''+'\n'],
            'EC_A':["           EC",' '+document.getElementById('rbod_ec1').value,'  # EC port on RBOD or GEM port on JBOD',''+'\n'],
            'Controller_ID#2': ["           ID",' '+document.getElementById('Controller_ID1').value,"   #Controller ID, A or B",''+'\n'],   
        }
      };
      addToPayload(data, ' ' );
        }

    if(i==1){
            let data1 = {
        "   PDU:": {
          "PDU_IP":['       PDU_IP',' '+ oForm.ip.value,"   #PDU IP",'  '+'\n'],
          "PDU_LEFT":['     PDU_LEFT',[oForm.lo.value]," # left_outlet(s) ",'   '+'\n'],
          "PDU_RIGHT":['        PDU_RIGHT',[oForm.ro.value]," # right_outlet(s) ", '    '+'\n']
        },  
        "   \n  CONTROLLER: # Controller settings ": {          
            "Controller_ID#1": ["       -  # Controller A for RBOD/EBOD"],
            "Netmask IP_A":["           MC_IP",' '+document.getElementById('mc_ip_1').value,'  # RBOD MC IP',''+'\n'],
            "MC_Netmask_A": ["          MC_Netmask",' '+document.getElementById('netmask_ip1_1').value,'  # RBOD MC Netmask',''+'\n'],
            'MC_Gateway_A':['           MC_Gateway',' '+document.getElementById('gateway_ip1_1').value,'  # RBOD MC Gateway',''+'\n'],
            'MC_A': ['          MC',' '+document.getElementById('rbod_mc1_1').value,'  # RBOD MC port',''+'\n'],
            'SC_A':['           SC',' '+document.getElementById('rbod_sc1_1').value,'  # RBOD SC port',''+'\n'],
            'FU_A':['           FU',' '+document.getElementById('rbod_fu1_1').value,'  # RBOD FU port',''+'\n'],
            'EC_A':["           EC",' '+document.getElementById('rbod_ec1_1').value,'  # EC port on RBOD or GEM port on JBOD',''+'\n'],
            'Controller_ID#2': ["           ID",' '+document.getElementById('Controller_ID1').value,"   #Controller ID, A or B",''+'\n'],   
        }
            };
        addToPayload(data1, ' ' );
}
    }

//Converting the data into a yaml file and downloading it on button click
      const blob = new Blob([payload], {
        type: 'text/yaml'
      });


      var file =  oForm.test.value + "_" + oForm.protocol.value + "_UUT_Config" + '.yaml';

      let link = document.createElement('a');
      link.download = file;

      if (window.webkitURL != null) {
        link.href = window.webkitURL.createObjectURL(blob);
      } else {
        link.href = window.URL.createObjectURL(blob);
        link.style.display = "none";
        document.body.appendChild(link);
      }
      link.click();
    }

      oCtrl.addEventListener('change', changehandler);
      oTest.addEventListener('change', changehandler);
      oSave.addEventListener('click', savehandler);
      })

Fiddle

Answer 1

Вместо того, чтобы использовать отдельные идентификаторы для каждого элемента, рассмотрите возможность использования классов. Например, вместо использования

document.getElementById('mc_ip').value

на первой итерации и

document.getElementById('mc_ip_1').value

на второй итерации, вместо этого создайте класс из mc-ip s Например:

<input class="mc_ip">

Используйте везде один и тот же шаблон - измените идентификаторы на классы, и каждый отдельный раздел должен использовать одно и то же имя класса для одних и тех же типов входных данных. Затем вместо использования повторяющегося

if(i==1){
  // lots of code referencing _1

для проверки того, что можно назвать addToPayload, просто введите

collection[i]

Например:

const mcIps = document.querySelectorAll('.mc-ip');
const mcNetmasks = document.querySelectorAll('.netmask_ip1');
const mcGateways = document.querySelectorAll('.gateway_ip1');
const mcAs = document.querySelectorAll('.rbod_mc1');
// ...

const data = {  
  "   PDU:": {  
    "PDU_IP":['       PDU_IP',' '+ oForm.ip.value,"   #PDU IP",'  '+'\n'],  
    "PDU_LEFT":['     PDU_LEFT',[oForm.lo.value]," # left_outlet(s) ",'   '+'\n'],  
    "PDU_RIGHT":['        PDU_RIGHT',[oForm.ro.value]," # right_outlet(s) ", '    '+'\n']   
  },    
  "   \n  CONTROLLER: # Controller settings ": {            
    "Controller_ID#1": ["       -  # Controller A for RBOD/EBOD"],  
    "Netmask IP_A":["           MC_IP",' '+mcIps[i].value,'  # RBOD MC IP',''+'\n'],    
    "MC_Netmask_A": ["          MC_Netmask",' '+mcNetmasks[i].value,'  # RBOD MC Netmask',''+'\n'], 
    'MC_Gateway_A':['           MC_Gateway',' '+mcGateways[i].value,'  # RBOD MC Gateway',''+'\n'], 
    'MC_A': ['          MC',' '+mcAs[i].value,'  # RBOD MC port',''+'\n'],  
  // ...

  // ...

};
addToPayload(data, ' ');