更新 Cloud Firestore 嵌套 map 字段中的查询数据

Question

I'm trying to update the data in nested map fields in firestore, my form is a window form that has 4 sides (wSide1,wSide2,wSide3,wSide4), what my form is doing is if customer select 1 field which is wSide1 and it needs to be updated then only this field only be updated but in my case it is updating all 4 sides, the one which is selected for example side 1 only that has the correct updated values other 3 sides updates with the false values. as my form is dynamic it only shows the field which is selected.

I only want to update the field which is selected, all other has to be null.

js & firestore query

    function updateWindowForm(form, type){
       var name = $('#name_'+type).val();
       var type = $('#type_'+type).val();
    

const taskformWindow = document.getElementById("taskformWindow");
    let editStatus = false;
    let id = '';

const updateTask = (id, updatedTask) => db.collection('Buildings').doc(buildingID).collection('rooms').doc(roomID).collection('objects').doc(objectID).update(updatedTask);
window.addEventListener("DOMContentLoaded", async (e) => {
 
      id = doc.id;
      editStatus = true;
    
    btnsEdit.forEach((btn) => {
      btn.addEventListener("click", async (e) => {
        try {
          const doc = await getTask(e.target.dataset.id);
          const task = doc.data();
      
          editStatus = true;
          id = doc.id;
          taskformWindow["btn-update-data"].innerText = "Update";

        } catch (error) {
          console.log(error);
        }
      });
    });

});


taskformWindow.addEventListener("click", async (e) => {
  e.preventDefault();

    
    var name_Window = document.getElementById('name_Window').value;
    var wAluminium = document.getElementById('wAluminium').checked;
    var wColorMeasurement = document.getElementById('wColorMeasurement').value;
    var wComments = document.getElementById('wComments').value;
    var wForEnd1 = document.getElementById('wForEnd1').checked;
    var wForEnd2 = document.getElementById('wForEnd2').checked;
    var wSideOfWindows = document.getElementById('wSideOfWindows').value;
    var wHardwareManufacturer = document.getElementById('wHardwareManufacturer').value;
    var wPlastic = document.getElementById('wPlastic').checked;
    
    //Side 1
    var wAxis1_1 = document.getElementById('wAxis1_1').checked;
    var wAxis1_2 = document.getElementById('wAxis1_2').checked;
    var wBackSet1 = document.getElementById('wBackSet1').value;
    var wDirectionLR1_1 = document.getElementById('wDirectionLR1_1').checked;
    var wDirectionLR1_2 = document.getElementById('wDirectionLR1_2').checked;
    var wHandleHeight1 = document.getElementById('wHandleHeight1').value;
    var wOverlapWidth1 = document.getElementById('wOverlapWidth1').value;
    var wSashRebateHeight1 = document.getElementById('wSashRebateHeight1').value;
    var wSashRebateWidth1 = document.getElementById('wSashRebateWidth1').value;
    
    //Side 2
    var wAxis2_1 = document.getElementById('wAxis2_1').checked;
    var wAxis2_2 = document.getElementById('wAxis2_2').checked;
    var wBackSet2 = document.getElementById('wBackSet2').value;
    var wDirectionLR2_1 = document.getElementById('wDirectionLR2_1').checked;
    var wDirectionLR2_2 = document.getElementById('wDirectionLR2_2').checked;
    var wHandleHeight2 = document.getElementById('wHandleHeight2').value;
    var wOverlapWidth2 = document.getElementById('wOverlapWidth2').value;
    var wSashRebateHeight2 = document.getElementById('wSashRebateHeight2').value;
    var wSashRebateWidth2 = document.getElementById('wSashRebateWidth2').value;
    
    //Side 3
    var wAxis3_1 = document.getElementById('wAxis3_1').checked;
    var wAxis3_2 = document.getElementById('wAxis3_2').checked;
    var wBackSet3 = document.getElementById('wBackSet3').value;
    var wDirectionLR3_1 = document.getElementById('wDirectionLR3_1').checked;
    var wDirectionLR3_2 = document.getElementById('wDirectionLR3_2').checked;
    var wHandleHeight3 = document.getElementById('wHandleHeight3').value;
    var wOverlapWidth3 = document.getElementById('wOverlapWidth3').value;
    var wSashRebateHeight3 = document.getElementById('wSashRebateHeight3').value;
    var wSashRebateWidth3 = document.getElementById('wSashRebateWidth3').value;
    
    //Side 4
    var wAxis4_1 = document.getElementById('wAxis4_1').checked;
    var wAxis4_2 = document.getElementById('wAxis4_2').checked;
    var wBackSet4 = document.getElementById('wBackSet4').value;
    var wDirectionLR4_1 = document.getElementById('wDirectionLR4_1').checked;
    var wDirectionLR4_2 = document.getElementById('wDirectionLR4_2').checked;
    var wHandleHeight4 = document.getElementById('wHandleHeight4').value;
    var wOverlapWidth4 = document.getElementById('wOverlapWidth4').value;
    var wSashRebateHeight4 = document.getElementById('wSashRebateHeight4').value;
    var wSashRebateWidth4 = document.getElementById('wSashRebateWidth4').value;

 try {
    if (!editStatus) {
      await updateTask(id, {
          name:name_Window,
          Form:{
            wAluminium: wAluminium,
            wColorMeasurement: wColorMeasurement,
            wComments: wComments,
            wForEnd1: wForEnd1,
            wForEnd2: wForEnd2,
            wHardwareManufacturer: wHardwareManufacturer,
            wPlastic: wPlastic,
          wSide1:{
            wAxis1_1: wAxis1_1,
            wAxis1_2: wAxis1_2,
            wBackSet1: wBackSet1,
            wDirectionLR1_1: wDirectionLR1_1,
            wDirectionLR1_2: wDirectionLR1_2,
            wHandleHeight1: wHandleHeight1,
            wOverlapWidth1: wOverlapWidth1,
            wSashRebateHeight1: wSashRebateHeight1,
            wSashRebateWidth1: wSashRebateWidth1,
            },
          wSide2:{
            wAxis2_1: wAxis2_1,
            wAxis2_2: wAxis2_2,
            wBackSet1: wBackSet2,
            wDirectionLR2_1: wDirectionLR2_1,
            wDirectionLR2_2: wDirectionLR2_2,
            wHandleHeight2: wHandleHeight2,
            wOverlapWidth2: wOverlapWidth2,
            wSashRebateHeight2: wSashRebateHeight2,
            wSashRebateWidth2: wSashRebateWidth2,
            },
          wSide3:{
            wAxis3_1: wAxis3_1,
            wAxis3_2: wAxis3_2,
            wBackSet1: wBackSet3,
            wDirectionLR3_1: wDirectionLR3_1,
            wDirectionLR3_2: wDirectionLR3_2,
            wHandleHeight3: wHandleHeight3,
            wOverlapWidth3: wOverlapWidth3,
            wSashRebateHeight3: wSashRebateHeight3,
            wSashRebateWidth3: wSashRebateWidth3,
            },
          wSide4:{
            wAxis4_1: wAxis4_1,
            wAxis4_2: wAxis4_2,
            wBackSet4: wBackSet4,
            wDirectionLR4_1: wDirectionLR4_1,
            wDirectionLR4_2: wDirectionLR4_2,
            wHandleHeight4: wHandleHeight4,
            wOverlapWidth4: wOverlapWidth4,
            wSashRebateHeight4: wSashRebateHeight4,
            wSashRebateWidth4: wSashRebateWidth4,
            },    
          wSideOfWindows: wSideOfWindows,    
          } 
      })
      editStatus = false;
      id = '';
      taskformWindow['btn-update-window-data'].innerText = 'Daten aktualisiert';
      
        swal("", "Daten wurden aktualisert!", "success");
    }

    taskformWindow.reset();
  } catch (error) {
    console.log(error);
  }
});

 } 

Answer 1

I can't see the code you use for updating your data but I can ausme that you probably did not set the merge to true while saving the data.

Take a look at this code snipped:

var cityRef = db.collection('cities').doc('BJ');

var setWithMerge = cityRef.set({
    capital: true
}, { merge: true });

By setting that we ensure to udate only the fields we want to and leave the rest as it is. Still make sure not to send fields with a null value because that is a valid value for firestore and it doesn't mean that those fields will by skipped in the update process. You can find more about ithere .