- Creating the Crew Member Form Fields
- Adding A Crew Member Button
- Moving Our Fields Into A Component and Template
- Array and Object Fields Names (Initial)
- Add Crew Member Click Handler Script
- Inspecting Our Form Submission Results
- Submitting With One Value (Object, Not Array)
- Submitting With Two or More Values (Object of Arrays)
- Using Indexes To Get An Array of Objects
- Validating Our Array of Objects
- Saving Our Crew Members with Pivot Table Data
- Testing Our Crew Member Save
- Querying Our Crew Members Directly from the Pivot Table
- Our Remaining Issue, Missing Indexes on Removal
- Adding AlpineJS
- Defining Our AlpineJS State
- Refactoring to use AlpineJS
- Testing Our AlpineJS Injected Indexes
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.
- Author
- Tom Gobich
- Published
- Jun 26
- Duration
- 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.
Adocasts
Burlington, KY
Transcript
Posting Objects, Arrays, and an Array of Objects in HTML Forms
-
(upbeat music)
-
So with your HTML forms,
-
there's gonna be times where you need to be able to send up
-
an array of data or even an array of objects.
-
And our cast and crew members
-
are one such instance for our movies.
-
Let's add them in down here
-
just above our update movie button.
-
So let's start by jumping into our creator edit page
-
right above that button.
-
We can give ourselves a little heading to mark
-
that this is where they will be.
-
Do font bold and just say this is the crew members.
-
And we'll just focus on the crew members here for now.
-
We will have a div with an ID of crew list.
-
This is the div that will list out
-
all the crew members attached to the movie within.
-
So we'll have this as class, flex, flex column,
-
and we'll have one child inside of this list
-
per crew member that we are attaching.
-
So we'll have a gap of three there as well.
-
And in here is where we can do an each to loop over them.
-
So we'll do an each member in,
-
and we'll call this variable crew members
-
whenever we get around to querying it.
-
Then we'll end our each.
-
And inside of here, we'll have another div class flex,
-
and we'll do a gap of three here as well
-
because we're gonna have multiple fields.
-
The first field that we need to have is a select,
-
and the options for the select are gonna be Cineasts.
-
So we can copy either our director or writer field
-
as a good starting point for this input,
-
pasting it in its place.
-
The label we can do as crew member.
-
The name we will circle back to momentarily,
-
whether or not it's selected.
-
Instead of doing movie dot something,
-
instead we're gonna query this information
-
directly from the crew movies and cast movies pivot tables.
-
So we'll be working directly with columns
-
as they're defined inside of the table here.
-
So this will be our member dot cynist_id,
-
as that's what the column is literally called
-
within our crew movies pivot table.
-
And that'll be in charge of discerning
-
whether or not this particular option is selected
-
as we loop over our cynist options.
-
Our next form input for the individual crew member
-
that we're on is going to be a self-closing form input.
-
The type's gonna be text, so we can omit that
-
with a label of title so that we can discern the title
-
of this individual crew member for this particular movie.
-
And the name for that will be title as well.
-
Additionally, we can add in the default value for this.
-
Again, that's gonna come from our member dot,
-
and we have a title column directly on that pivot table.
-
Lastly, we wanna be able to remove this member
-
from the movie.
-
So we'll have a button of type button
-
so that whenever we click this button,
-
it doesn't actually submit our form.
-
We'll have an onclick handler.
-
In onclick, what we wanna do is reach up
-
to the parent of the button that encapsulates
-
all of the fields specific to the individual crew member.
-
So that would be this div right here,
-
which happens to be the direct parent of our button.
-
So we can get access to this button element via this,
-
reach for its parent element,
-
and then remove that parent element,
-
thus in turn removing all of the individual fields
-
that we have specific to this crew member.
-
And the way that we're going to save this on our controller
-
is to sync the data.
-
So by simply removing it out of our HTML form,
-
it's going to serve as a delete
-
anytime that we come to update or save our crew members.
-
And we can put a little and times character,
-
which will be a little X to serve
-
as the indicator for that button.
-
Okay, so that should do it
-
for our field specific to a crew member.
-
Now what we need to do is add the ability
-
to add an additional crew member to this crew list.
-
So underneath this crew list,
-
right above our submit or create button,
-
we can add in another button of type button.
-
Onclick will add a crew member,
-
and we'll create that function here momentarily.
-
And we can give this a label of add crew member.
-
Now this will be a client side function.
-
So we'll want to plop this inside of a script tag.
-
So we'll add a script tag down at the bottom of our page
-
with a function add crew member defined.
-
For this function, what we're going to want to do
-
is be able to essentially plop one of the contents
-
that we're looping over here for our crew members,
-
so that we'll be able to select what that new crew member is
-
and define their title as well.
-
If you're using something like HTML or Unpoly,
-
you would be able to reach out to your server
-
to get back that HTML to append into your document.
-
We're not, so we're going to reapply this exact HTML
-
somewhere that we can easily access it
-
from our client side script.
-
And to make this easily doable,
-
we're going to cut out all of that HTML
-
that we're looping over and move it into a component.
-
So let's scroll on up to,
-
we should have components movie here.
-
Let's right click that, create a new file.
-
This will be our crew member fields
-
or something of the sort.
-
There's not a very distinct name
-
that would be applicable for this
-
and paste the contents that we had cut out in.
-
These are the fields applicable to one single crew member
-
that we're binding into a movie.
-
We'll circle back and fill in the names here.
-
Oh, I defaulted to filling in the name here.
-
We'll circle back and fill in
-
both of these names here momentarily,
-
because we're going to need to specify them
-
in a specific way.
-
So let's jump back into our creator edit
-
and let's add in our self-closing
-
movie.crewmemberfields component.
-
Inside of here, we'll need to pass the member in
-
as well as the Cinest options that we have
-
specifically for the select,
-
so that we'll be able to select
-
the applicable crew member Cinest record.
-
We can give this component here a copy
-
and outside of our form, above our script,
-
let's go ahead and add in a template tag
-
and give this an ID of crew template
-
or something of the sort and paste the component inside.
-
So now EdgeJS will render our crew member fields
-
both inside of this template,
-
as well as for each one of our crew members
-
already bound into our movie.
-
This section here will serve as kind of the default value
-
whenever we're editing.
-
Any pre-existing crew members will load in here via Edge.
-
Otherwise, we'll get a template that we'll be able to clone
-
and append in anytime that we click
-
our add crew member button.
-
Now we have a little bit of more work to do here.
-
So first and foremost,
-
we're not going to have a member for this one.
-
So we'll want to pass it in as null,
-
meaning that we need to jump into this component
-
and make sure that that is nullable.
-
So we can just use optional chaining
-
for both references of our member
-
to make sure that that is valid.
-
Next, we need to take care of the names for both of these.
-
Now, there's a number of different ways
-
we can go about adding a name in for this
-
and square brackets are going to be necessary
-
in order for us to send this up as an array
-
or even an object.
-
So we can give it a baseline name of crew
-
and it will send up as such.
-
And we can specify that crew is going to be an array
-
by adding square brackets to the end of it,
-
similar to how you would in TypeScript
-
if you have a type that is an array.
-
Then we can specify kind of an object key
-
specifically for this field
-
by doing another bracket pair
-
and adding the name of the object property
-
that we want this to be applicable to,
-
which in this case, ID would probably be good
-
as the value is going to be sent as ID.
-
We can do something similar down here for our title as well.
-
So we'll have crew, add that into an array,
-
do another set of brackets
-
and give it a property name of title.
-
Now I'm pretty sure we're going to have an underlying issue
-
with this approach,
-
but we'll go ahead and test it out and see how it goes.
-
So in order for us to test this out,
-
we need to rig up our add crew member button.
-
So outside of our add crew member function,
-
what would be good is to already have a reference
-
to our crew template, as well as our crew list.
-
So let's go ahead and query both of those.
-
So we could do const crew list equals document.getElementByID
-
and pass in the crew list ID there.
-
And we could do const crew template equals document.getElementByID
-
crew template.
-
Within our crew list, what we can do is append child,
-
essentially a clone of our crew template.
-
So we can take our crew template, reach for the content,
-
tell it to clone the node,
-
pass in true there to clone it deeply.
-
And then this should clone the crew templates contents
-
and append that element into our crew list.
-
So let's give it a save.
-
And then let's jump into our movie validator
-
and let's rig this up in a way
-
where it's gonna come up invalid,
-
just so that we can easily get back
-
and see exactly what it is that we're posting up.
-
So let's do crew and let's say vine date.
-
We're certainly not gonna be posting a date up
-
for our crew.
-
So that should most certainly fail.
-
And then on our creator edit,
-
let's go and scroll up to the top
-
and let's plop an instance of our flash messages.
-
So let's inspect it out, flash messages,
-
and we can reach for all of them
-
just so that we can easily see exactly what it is
-
that we're posting up here
-
as we submit and test out our crew list functionality.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!