Let's Learn AdonisJS 6: Ep 11.8 - Posting Objects, Arrays, and an Array of Objects in HTML Forms
Learn how to send arrays and objects in HTML forms
👍 If You Enjoy This Video, Consider Hitting The Like Button!
👨💻 Series Source Code: https://github.com/adocasts/lets-lear...
🥁 Subscribe To Stay Notified For New Videos: https://www.youtube.com/adocasts?sub_...
Subscribe to Adocasts Plus to gain access to all our lessons and more!
https://adocasts.com/pricing
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.
⏰ Timestamps
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
------------------------- Socials --------------------------
Website: https://adocasts.com
Threads: https://threads.net/@adocasts
Twitter: / adocasts
GitHub: https://github.com/adocasts
