Eloquent results to options array for Select

[helloadmin]

A common usecase is to get results from a database query (in this case Laravel Elequent) to drive the options for a Select drop down.

I'm finding I need to take the elequent results and drive a server side foreach loops to recreate an array that works for FormKit and the Select Options array and pass it over with formkit-addon-inertia.

Do you have any recommendations on how to take output from a Laravel query and more directly drive the Options array?

[fenilli]

You can map the query result to conform to the { label: string, value: any } of FormKit options.
You can also use a plugin that I made that makes options have a labelAs and valueAs to easily map those to the correct options.

Do you have any ideas on what could be added to help with this? maybe a helper function, or maybe when the useInertia gets more features we could think of something there.

[fenilli]

Well by map I mean using Array.map from javascript, so lets say you're using Inertia and passing a collection of Users to a prop called users.

const props = defineProps(["users"]);
// This will return
/*
  [
    {
      "id": "1",
      "name": "User 1"  
    },
    {
      "id": "2",
      "name": "User 2"
    }
  ]
*/

Then we can simple use a map when passing to :options.

<FormKit type="select" :options="props.users.map((user) => ({ label: user.name, value: user.id }))" />

[helloadmin]

@GustavoFenilli Freaking AWESOME!!!

[helloadmin]

This approach works super well.

When representing a zero-to-one relationship with a select box, there could often be a null value which is represented by the select box as being empty.

Do you have a suggestion on how to bind this array of label value pairs to also include a empty set? I was thinking of using a sql union and injecting a null, null into the sql result set. Do you think there is a better way?

[fenilli]

In FormKit there is the placeholder, where a value can be represented as "default" for an empty option.

<FormKit type="select" placeholder="No user selected" :options="props.users.map((user) => ({ label: user.name, value: user.id }))" />