Posting Objects, Arrays, and an Array of Objects in HTML Forms

In this lesson, we'll learn how we can use form field names to send an array of objects with our HTML form submission. We'll discuss pitfalls to watch out for and how we use AlpineJS to simplify index syncing within our field names.

Jun 26
26m 26s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.


Burlington, KY

00:00 - Creating the Crew Member Form Fields
03:21 - Adding A Crew Member Button
03:56 - Moving Our Fields Into A Component and Template
06:16 - Array and Object Fields Names (Initial)
07:16 - Add Crew Member Click Handler Script
08:04 - Inspecting Our Form Submission Results
08:50 - Submitting With One Value (Object, Not Array)
09:19 - Submitting With Two or More Values (Object of Arrays)
09:46 - Using Indexes To Get An Array of Objects
12:54 - Validating Our Array of Objects
13:36 - Saving Our Crew Members with Pivot Table Data
15:53 - Testing Our Crew Member Save
16:21 - Querying Our Crew Members Directly from the Pivot Table
17:21 - Our Remaining Issue, Missing Indexes on Removal
18:01 - Adding AlpineJS
18:28 - Defining Our AlpineJS State
19:46 - Refactoring to use AlpineJS
25:32 - Testing Our AlpineJS Injected Indexes

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!