Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Select component with mysql table values

Issue

I am creating an app and I have a select component, but I need to display options and values from my MySQL table. I have a JSON result with all the locations, but I need to parse it to only show the location names in the select component. How can I do this?

Resolution

To display the "Name" of the locations from the JSON response in a select component, you need to parse the JSON and extract the required data. You can achieve that with the "Data" field of the select component.

First, create a query that fetches the required data from your MySQL table. Next, use the "JSONParse" function of Appsmith to parse the JSON response into an array of objects.

Then, you can use the "map" function to extract the "Name" field from each object and return a new array containing just the names. Finally, set this array as the value of the "Data" field of the select component.

Here's an example code snippet that demonstrates this:

const queryResponse = await API.query({ 
    queryName: "fetchLocations", 
    }),
parsedResponse = JSON.parse(queryResponse.response.body), 
locationNames = parsedResponse.map((location) => location.Name);

// Set the locationNames array as the value of the "Data" field of the select component.

Note that you will need to replace "fetchLocations" with the name of your query that fetches the data from MySQL. Also, make sure that the name of the "Name" field in your MySQL table matches the property used in the "map" function.

With these changes, you should be able to display the "Name" field of the locations in the select component of your Appsmith app.