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