# Working with arrays and objects
# Arrays
An array is a collection of similar data elements.
# HTML
You can submit an array by using the name[index]
syntax:
<form action="https://submit-form.com/your-form-id">
<input type="text" name="ingredients[0]" placeholder="Ingredient 1" />
<input type="text" name="ingredients[1]" placeholder="Ingredient 2" />
<input type="text" name="ingredients[2]" placeholder="Ingredient 3" />
<input type="text" name="ingredients[3]" placeholder="Ingredient 4" />
<button type="submit">Send</button>
</form>
# AJAX
axios.post("https://submit-form.com/your-form-id", {
ingredients: ["anchovies", "cheese", "flour", "tomato", "water"],
});
# Objects
An object is a standalone entity with properties.
# HTML
You can submit an object by using the name.property
syntax:
<form action="https://submit-form.com/your-form-id">
<input type="text" name="car.manufacturer" />
<input type="text" name="car.color" />
<button type="submit">Send</button>
</form>
To submit an array of objects:
<form action="https://submit-form.com/your-form-id">
<input type="text" name="car[0].manufacturer" />
<input type="text" name="car[0].color" />
<input type="text" name="car[1].manufacturer" />
<input type="text" name="car[1].color" />
<button type="submit">Send</button>
</form>
# AJAX
To submit an object:
axios.post("https://submit-form.com/your-form-id", {
car: {
manufacturer: "Ferrari",
color: "Red",
},
});
To submit an array of objects:
axios.post("https://submit-form.com/your-form-id", {
cars: [
{
manufacturer: "Ferrari",
color: "Red",
},
],
});