Build a Livewire CSV Importer
This episode is for members only

Sign up to access "Build a Livewire CSV Importer" right now.

Get started
Already a member? Sign in to continue
Playing
08. Setting the columns to import

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
So in the last episode, we ended up with a list of the headers inside an array, which we're going to use to populate this dropdown. But what about the columns we want
00:08
to choose to be able to import? We don't necessarily want to just default to all of the columns inside of here. We might only want to be able to import a specific section
00:18
of them or a subset of them. Well, to do this, we're going to head over to the index on our customers where we use this CSV importer. And we want to pass another property through to this
00:31
so we can choose which columns we want to map in. And we're going to call these columns to map. The reason being is we're mapping the CSV headers to these columns in our database so the data connects out
00:43
properly. So I'm going to go ahead and just call this columns to map. Of course, you can choose a different name. And again, this is just going to be an array.
00:50
So we're going to allow the ID to be mapped so we can choose to not replace things that already exist. We want maybe the first name, the last name, and the email. Let's just keep it at that for now so we can keep it simple.
01:03
But we can add more a little bit later. OK, so back over to our CSV importer. If we head up here, we want to go ahead and set the columns to map.
01:13
So let's go ahead and say public array columns to map. And that's going to be an empty array by default. Now, what we want to end up with, it's pretty difficult to explain,
01:25
is an array that has the structure of columns to map that each of them columns that we've just passed in here need to be assigned an empty value. The reason that we want to do that
01:37
is when we start to map these together, we want the value of the header that we've chosen to map up to the columns that we want to include. So I'm going to go ahead and just give you an example
01:51
output of how this is going to look. So let's just dump this in here. So if we had ID, first name, et cetera, what we want to do is make this into an array that looks like this.
02:02
So we want to convert this basically so that each of these items now become keys, and then they have values. That means that when we have a dropdown selection
02:11
for the first item ID, maybe that is customer ID, we get these mapped up so we know what to map to what. Hopefully that makes sense. So how do we do this?
02:21
We've got our columns to map. We effectively want to replace this with that structure so we can include it in our dropdown in our form. So we can do this when the component mounts.
02:31
So this is a lifecycle hook within Livewire. And in here, we're going to go ahead and just reassign columns to map to that new structure. Now, because this is just a plain array,
02:41
I'm going to go ahead and collect this up first of all. So we're going to convert that into a Laravel collection object, which we can then use to manipulate as we need.
02:51
So we're going to go ahead and map over this with keys. And that's really important because we want to preserve them. And then we're going to have a callback in here, which takes in the column that we want to map.
03:01
And we're going to return instead or effectively replace this with a column, but the column is the key and an empty string as the values. That's pretty much the structure we've already looked at.
03:14
Then we're going to go ahead and just cast this back to an array. And that is pretty much it. So now if we head over to our CSV importer,
03:21
let's go ahead and dump out columns to map and see what we get. So if we come over now and hit import, there we go. We've got an array here.
03:29
In this case, because it's dumped out as JSON, it becomes an object, but we've got ID as the key and an empty value. That means that when we start to iterate through these
03:37
and this is ID and we choose say customer underscore ID, will then contain the value customer underscore ID. So everything gets mapped up nicely. But that's pretty much the basics
03:49
of how we're going to start to map. What we're going to do in the next episode is put together the UI so we can actually map these up. So let's go over to the next episode and finish that off.

Episode summary

In this episode, we look at how to control which columns from your CSV you actually want to import—because sometimes, you don’t need, or want, every column.

We start by heading to our customers index where the CSV importer is used and introduce a new property, columnsToMap. This is an array that lets us specify just the columns we care about, like id, first_name, last_name, and email. You can always add more later, but keeping it simple lets you see how the process works.

Then, inside the CSV Importer component, we set up columnsToMap as a public property, and show how to transform it so each field (like id or email) becomes a key in a new array, with an empty value ready to be mapped later. This structure makes it easy to line up which CSV headers should match which database columns.

We use a Laravel collection to do the array transformation, making sure each column is ready for the dropdowns in our mapping UI. After a quick test dump, you’ll see the array structure is looking good—all set up for mapping.

That’s pretty much everything needed for mapping the columns! In the next video, we’ll actually build the UI to let users select which header goes with which column. See you there!

Episode discussion

No comments, yet. Be the first!