具有输入值的重复对象

Question

我有一个创建表单的 javascript 中继器， 但问题是，当我带入值时，它们都输入到单个对象中，而不是单独的对象中，数组位置内部应该创建类似的结构。

"locations":[
        {
           "coordinates":[
              -80.128473,
              25.781842
           ],
           "description":"Lummus Park Beach",
           "day":1
        },
        {
           "coordinates":[
              -80.647885,
              24.909047
           ],
           "description":"Islamorada",
           "day":2
        },
   ]

我的代码从输入中获取信息，但将其放在同一个对象而不是单独的对象中。

//This is the code which take input value and inser in boject structure

const createTour_form = document.querySelector('.form-create__tour');
if (createTour_form) {
    createTour_form.addEventListener('submit', (cr) => {
        cr.preventDefault();
        
        //Ceeate an empty array
         
          let loc_coordinates = [];
            let loc_description = [];
            let loc_day = [];
            let get_locations = [];

            //Get Coordinates
            document.querySelectorAll(".location_field_card").forEach(f => {
              let obj = [];
              f.querySelectorAll(".location_new_tour").forEach(ele => obj[ele.value] = ele.value || "");
              loc_coordinates.push(Object.keys(obj));
            });

             //Get Descriptions
             document.querySelectorAll(".location_field_card").forEach(f => {
              let obj1 = {};
               f.querySelectorAll(".description_location").forEach(ele => obj1[ele.name] = ele.value || "");
              loc_description.push(obj1)
            });

             //Get Day
            document.querySelectorAll(".location_field_card").forEach(f => {
              let obj2 = {};
               f.querySelectorAll(".location_day").forEach(ele => obj2[ele.name] = ele.value || "");
              loc_day.push(obj2)
            });
           
            //Reverse Coordinates
            const getGeo = [...loc_coordinates].toString().split(',').reverse().join(' ').replace(' ', ' ,');
            get_locations.push(getGeo)


            const getLocation = Object.values(...loc_description);
            const getValLocation = getLocation.toString();
            const getDay = Object.values(...loc_day);
            const getValDay =parseInt(getDay.toString());


           
            let getTotaLocation = new Object({
                "coordinates":[...get_locations],
                "description":getValLocation,
                "day":getValDay
            });
          

      
            console.log(getTotaLocation);

         
         
    })
  }

<form class="form form-create__tour">
   <h1 class="title--create--tourpage">Locations</h1>
               <div class="form__group all_tours_options">
                  <div id="add_location_field">
                     <div class="location_field_card">
                        <p class="subfield_natours_create_tour">Location</p>
                        <input class="form__input location_new_tour"  type="text"  value="24.5647846,-81.8068843">
                        <p class="subfield_natours_create_tour">Location Description</p>
                        <input class="form__input description_location"  type="text" value="Lummus Park Beach">
                        <p class="subfield_natours_create_tour">Day</p>
                        <input class="form__input location_day"  type="number" value="1" >
                     </div>
                  </div>
                  <button class="btn btn--small--add btn--green" id="add_location_fields">Add Location       Field</button>
               </div>
               
               <div class="form__group right"><button class="btn btn--small btn--green" id="createTour">Create Tour</button></div>
            </form>
            
    
    <!--This Javascript code generate new fields when Add Locaton field is clicked-->
    <script>
      const addLocation = document.getElementById('add_location_fields');
         if(addLocation){
            let count_createdCards = 0;
            let count_Deletebutton = 0;
            let incrementFunction = 0;
            addLocation.addEventListener('click',(st)=>{
               st.preventDefault();
               let createAddField = document.getElementById('add_location_field');
         // Crd
        
         count_createdCards++;
         count_Deletebutton ++;
         incrementFunction ++;
         let card = document.createElement('div');
            card.setAttribute('class','location_field_card');
            card.setAttribute('id','delete_card_'+ count_createdCards)
           
         //First Card Title 
         let cartTitle1 = document.createElement('p');  
             cartTitle1.setAttribute('class','subfield_natours_create_tour');
             cartTitle1.textContent = 'Location'; 
         let inputLocation = document.createElement('input'); 
             inputLocation.classList.add('form__input');
             inputLocation.classList.add('location_new_tour');
             inputLocation.setAttribute('type','text');
             inputLocation.setAttribute('value','24.5647846,-81.8068843');
          //Second Card Title
         let cartTitle2 = document.createElement('p');  
             cartTitle2.setAttribute('class','subfield_natours_create_tour');
             cartTitle2.textContent = 'Location Description'; 
         let inputDescription_location = document.createElement('input');
             inputDescription_location.classList.add('form__input'); 
             inputDescription_location.classList.add('description_location'); 
             inputDescription_location.setAttribute('type','text');
             inputDescription_location.setAttribute('value','Lummus Park Beach');
         //Third Card Title
         let cartTitle3 = document.createElement('p');  
             cartTitle3.setAttribute('class','subfield_natours_create_tour');
             cartTitle3.textContent = 'Day'; 
         let inputDescription_day = document.createElement('input'); 
             inputDescription_day.classList.add('form__input'); 
             inputDescription_day.classList.add('location_day');
             inputDescription_day.setAttribute('type','number');
             inputDescription_day.setAttribute('value','1');
         let removeButton = document.createElement('a');
             removeButton.classList.add('btn');
             removeButton.classList.add('btn--small--add'); 
             removeButton.classList.add('btn--red');
             removeButton.setAttribute('onclick','removeAction_'+count_Deletebutton+'()');
         let removeScript = document.createElement('script');
         removeScript.innerHTML = "function removeAction_".concat(count_Deletebutton, "() {\n\n var delCard_")
                                          .concat(incrementFunction, " = document.getElementById(\"delete_card_")
                                          .concat(count_createdCards, "\");\ndelCard_")
                                          .concat(incrementFunction, ".remove();}");
             removeButton.textContent = 'Remove Location Field';   
             card.appendChild(cartTitle1);
             card.appendChild(inputLocation);
             card.appendChild(cartTitle2);
             card.appendChild(inputDescription_location);
             card.appendChild(cartTitle3);
             card.appendChild(inputDescription_day);
             card.appendChild(removeButton);
             card.appendChild(removeScript);
             createAddField.appendChild(card);
             

            });
         }
    
    
    </script>        

Answer 1

我通过添加重复动态 id 的折叠解决了这个问题：

  //Increment Coordinates
   let incrementCoordiantes = 0; 
   //Increment Description
   let incrementDescription = 0; 
   //Increment Day
   let incrementDay = 0;

 addLocation.addEventListener('click',(st)=>{
           let createAddField = document.getElementById('add_location_field');
    
     incrementCoordiantes ++;
     incrementDescription ++;
     incrementDay ++;
     let card = document.createElement('div');
       ......
       inputLocation.setAttribute('id','getCoordinates_'+ incrementCoordiantes);
       inputDescription_location.setAttribute('id','getDescription_' + incrementDescription);
       inputDescription_day.setAttribute('id','getDay_' + incrementDay );

我使用querySelectorAll 从转发器获取列数，然后我使用for 增加 id 以匹配 html 文件中的 id，然后在数组中推送它的所有值，它的工作。

   const push_location_data = [];
      const getAll_locations =  document.querySelectorAll(".location_field_card");
      for (let i=1; i< getAll_locations.length; i++) {

    let cord_lat_lng = 'getCoordinates_' + i;
    let cord_description = 'getDescription_' + i;
    let cord_day = 'getDay_' + i;

    let dinamic_obj = {
        coordinates:[[document.getElementById(cord_lat_lng).value].toString().split(',').reverse().join(' ').replace(' ', ' ,')],
        description:document.getElementById(cord_description).value,
        day:document.getElementById(cord_day).value
    }
  

    push_location_data.push(dinamic_obj);
};

location arrray