How to send only inputs with value?

Question

I have a form:

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

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

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

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

                <div class="submit-btn">
                    <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?

Answer 1

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 })
        }
    }
};

Answer 2

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) }) */

Answer 3

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,
        }
}

}

Answer 4

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 })
        }