I have a form:

<form id="carForm">
                <div >
                    <label for="">Year:</label><br>
                    <input id="year" type="number" placeholder="1990" required>
                </div>

                <div >
                    <label for="">Mileage(km):</label><br>
                    <input id="mileage" type="number" placeholder="30000" required>
                </div>

                <div >
                    <label for="">Brand:</label><br>
                    <input id="brand" type="text" placeholder="Mercedes" maxlength="20" required>
                </div>

                <div >
                    <label for="">Maintenance:</label><br>
                    <input id="maintenance" type="number" placeholder="0000" >
                </div>
                <div >
                    <label for="">Cooling system:</label><br>
                    <input id="cooling" type="number" placeholder="0000" >
                </div>
                <div >
                    <label for="">Total amount:</label><br>
                    <input id="total" type="number" placeholder="0000" disabled>
                </div>

                <div >
                    <input type="submit" value="Add">
                </div>
            </form>

And a sending method:

let dataToSend = {
    repair: {
        year: yearField.value,
        total_amount: totalField.value,
        mileage: mileageField.value,
        brand: brandField.value,

        items: {
            maintenance: maintenanceField.value,
            cooling_system: coolingField.value,
        }

axios({
        method: "post",
        url: 'url',
        data: {
            dataToSend
        },

How to send only fields containing the value? For example: Cooling system input value is 1.000, and maintenance input value is 0. How to send only that one (cooling system) field?

CodePudding user response：

In ES6, you can do

...(condition && {key: value})

Taking your example:

const coolingField = {value: 1};
const maintenanceField = {value: 0};

let dataToSend = {
    repair: {
        items: {
            ...(coolingField.value > 0 && { maintenance: coolingField.value }),
            ...(maintenanceField.value > 0 && { cooling_system: maintenanceField.value })
        }
    }
};

CodePudding user response：

Here is a way to do it.

let dataToSend = {
  repair: {
    year: 15,
    total_amount: '',
    mileage: 232,
    brand: 'asa',

    items: {
      maintenance: '',
      cooling_system: 12,
    }
  }
}

// Remove empty key values
const clearEmpties = (obj) => {
  for (var propName in obj) {
    if (typeof obj[propName] == "object")
      clearEmpties(obj[propName])
    if (obj[propName] === null || obj[propName] === undefined || obj[propName] ==='')
      delete obj[propName];
  }
  
  return obj
}

console.log(clearEmpties(dataToSend))

/*
axios({
      method: "post",
      url: 'url',
      data: {
        clearEmpties(dataToSend)
      })
*/

CodePudding user response：

you can use conditions like

if(maintenanceField.value > 0 && coolingFieldValue <= 0 ){
items: {
            maintenance: maintenanceField.value
        }
}
elseif(maintenanceField.value <= 0 && coolingFieldValue > 0){
items: {
            cooling_system: coolingField.value
        }
else{
items: {
            maintenance: maintenanceField.value,
            cooling_system: coolingField.value,
        }
}

}

CodePudding user response：

To send the inputs with the value you can just check if the input fields is null or not by using conditions like

 items: {
            ...(coolingField.value > 0 && { maintenance: coolingField.value }),
            ...(maintenanceField.value > 0 && { cooling_system: maintenanceField.value })
        }