如何僅發送具有價值的輸入？

Question

我有一個表格：

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

和一個發送方法：

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

如何僅發送包含該值的字段？ 例如：冷卻系統輸入值為1.000，維護輸入值為0。如何只發送那個（冷卻系統）字段？

Answer 1

在 ES6 中，你可以做

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

以你為例：

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

這是一種方法。

 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

你可以使用類似的條件

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

要發送帶有值的輸入，您可以使用以下條件檢查輸入字段是否為 null

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