How to corretly set a List value and a List label to a dropdown?

Hello community,

I use the dropdown widget to display all categories available.

To achieve it, I’m doing a backend query to an API which delivers the list of categories in JSON format.
Here is a sample of the JSON response:

{
  "data": [
    {
      "id": 1,
      "image": null,
      "name": "Washing Machine"
    },
    {
      "id": 3,
      "image": null,
      "name": "Vacuum Cleaner"
    },
    {
      "id": 5,
      "image": null,
      "name": "Oven"
    }
  ]
}

Then I want the user to select a category by its name.

To achieve this, I parameter the label of the dropdown to be the result of the API, with a custom JSON response:
$.data[:].name
This parameter is a variable type: List<String>.

But I want the value of the dropdown to be the id field corresponding to the selected item’s name.
So I parameter the value of the dropdown to be the result of the API, with a custom JSON response:
$.data[:].id
This parameter is a variable type: List<int>.

I double-checked everything, but it doesn’t work as expected.

It seems there is a type problem.

I can do a hack with a custom action, as explained 1 year ago on this post, but now the functionality seems to be implemented directly on the graphic app builder, so I’m wondering how to correctly use it.

By the way, the custom action hack is not a scalable solution, as the function will look at all the data contained in the category list (which could be much bigger in a products list for instance) to find a match between the name label and an item with the same name field, and then fetch the id from that item.

Future<int?> getIdFromJson(
  List<dynamic> categories,
  String? name,
) async {
  for (dynamic category in categories) {
    if (category["name"] == name) {
      int? result = category["id"];
      return (result);
    }
  }
  return (null);
}

Does someone get the solution for my use case, or already faced the same issue? 😀