okay, so in this video, we're going to look at JSON objects and how you deal with them in Flutter Flow. If you're building any kind of app and you're dealing with APIs, or sometimes even with your own database, you are going to come across situations where you need to deal with JSON objects and extract data from them. So, I've got three ways here that I'm just going to run through quickly that you can do just that. I have covered these all before in separate videos, but I've never covered them in one, so here we go. So, the first one is if we're using an API call within Flutter Flow. So, on the left-hand side there, that's our menu option. Basically, our response in this instance, I'm calling the OpenAI image generation API. There in our response here, we want to get the opportunity to map the JSON path. Now, I'll get on to how we use that in a second and what that does. That actually is the, if you like, the path to that particular element of the JSON.

Json object. So, within the data object, which is a list of objects, then we're after the one called URL. Now, if you do a test and you test your API call, what you'll get is some recommended options down at the bottom, and then you can use those to add a new JSON part, basically. So, you can extract the specific bit of data you want from it by using this format. So, if we go to the OpenAI documentation, this is the response format that you get from OpenAI. So, you can see it's the JSON. We've got data, which is the list of objects, and we've got URLs. In our case, we only got one URL, but also you can put in there the revised prompt, because when you send a prompt to OpenAI, it actually adds to it, fluffs it out a bit, and makes it more descriptive, and that you can get that sent back as well. So, you can also access that. So, we are looking at basically the JSON object. We're looking at the data.

element, and we are looking for the URL so that Json path is the Json object, the data element, and the URL. So, these are pretty handy because we can use them pretty easily within our flow project. So, if we go and find a page, there we go. Basically, I've set this up already. So, if we've got a button and we make an API call, and the API result succeeded, what we're doing then is to that text object, we are mapping the data URL. So, therefore, if we did the API call, we would get the image URL in that text box. So, we simply mapping API result, which is our custom action output. We've got API result, which is our action output for the API call, and then we're going Json body, Json path, because that's where we're doing it, and that's our Json path to the element that we want to use. And then that is, you can then use that anyhow you like within your app. So, that's method one. It's actually pretty handy.

and it's actually dead simple if you're using the API calls. Now, method two is custom data types. So, on the response, you can select a custom data type, which you need to have set up obviously. And let's go to the data type. So, we've got a custom data type called OpenAI. In this, we've only got one field, and the field name is URL, and the data type is image path. Obviously, it's URL to the image, and the important thing here is that the URL field name needs to exactly match the field name that you are trying to sort of extract from the JSON object. So, there are more complicated versions of that. So, let's go to that because then it's an easy way to explain how you would use that information. So, go to another project. Okay, so I've done this before in the database search video, but I think people that are specifically looking for JSON stuff, this is probably worth going over again. So, we're doing exactly the same thing here, except we are not

using the API call within Flutter Flow, what we're actually doing is searching our own database. So, this is a search database by keyword, and what we're doing, we are searching our own table for information relating to job search in this instance, and our output is jobs JSON. That's our action output that we are retrieving back from our database, and that's the JSON object. So, if we go to custom code and go to search table, basically, we're calling a Supabase function that searches our table and returns a JSON response, essentially the response from the search as a JSON object. And then we have got a custom data type, and it's called JSON response, and these are the fields that we're returning from our table in Supabase. So, we've got JSON object and all the objects within that. These are the fields that they're called, and they are table column names, basically, and the type of data that's in them. So, these must match the name of the object within your JSON response, whether that's from

an API or from your own table. Whatever it's from, these must be exactly the same so it knows to map it to the data type. So how we use that particular version. So if we basically start with the grid view. So our grid view value, i.e., the information we use to create the dynamic children, is jobs JSON, which, if you remember, is the action output from our custom action, which is the JSON object of the search returned information from Supabase. And that's what we're using to create the dynamic children within our grid view. And then from there to map the elements, we're mapping jobs list items. So essentially, go back to there again, calling the variable jobs list within the grid view with the values of the JSON. So jobs list is what we're looking for. We're mapping it to a data type. We've got a data type called JSON response, which is this one, and we're looking for a data structure field. In this instance, we're looking for the role. So, or whatever the

role is within our response, so it might be an engineer, whatever it may be that will go in there. And same for all these, for instance, that would be the salary. So we are mapping some response to the... So we're mapping the job list, the list within the grid view that we've created from the JSON response. We're mapping it to the data type JSON response, and the structure field we pick in this instance is salary. So that would then pick the salary out of there. And if there's one object within the JSON you're getting from your API or your search, you'll just get the one element here. But obviously, the more objects within the list, then your sort of data grid will populate. That's the second way to do this. Now the third way is done purely in the code. So we back to the other demo project. Okay, so in this version, we are again calling the OpenAI API, and we want an image URL to populate our image object there. And it will be the URL of the image that the AI creates. So on our

custom actions we're looking for this one get image, and we type given we send in the API prompt, obviously, so we can tell the AI what we need, and we send in the user ID. That's not relevant to this; that's some super base backend checks and balances type thing. But importantly, output variable coming back with is called open AI. What we're then doing, we've got an image URL page date, which we are updating with the output of our get image function, which was output was open AI, updating the page date, and that's going in there, and knock on of that is the image URL is the page state. So we're placing our response from open AI query into the page date, and that's how we're display the image. Now then, how we're extracting this information is what's different about this one. So basically, returning image path is our return, so returning a string, not ajacent object as an image path. Apolog if you can hear my fan; it's my computer. The Fan's going off pretty loudly at the moment, but returning a

string as an image path as our response from the remote procedure call because what we're doing we are decoding basically decoding the Json within the code and we are essentially got a variable called URL and out the response data IE the response which is our response from our API call and we are going into the data element and we want index zero and we want the URL of index zero so data element and this is a list of objects and in this instance obviously we've got two objects URL objects that will be index zero be that one index one will be that one and then so on and so forth I started index zero so if we wanted the second one for instance if you were creating a second one that there would be index one and so on and so forth but in our instance we're only creating one image so therefore we only need index zero anyway and we are returning that as a string which is the URL and we're returning the URL as an image path which in turn as I've just

described we are adding to the page date and displaying it on the page. So, there's three ways if you're doing with Json that you can extract the information out of them and use them in your apps. Those three I use and they're pretty straightforward. So, there are videos around on the channel where you can actually dive into these where they have been used in different scenarios. We've got the search one, we've got one specifically the API call as well. Hopefully, that will help you solve what sometimes can be an interesting problem to get over when you start clicking those boxes and everything's grayed out or everything's red and you don't really know what to do next. So, that's where I get around it. Hopefully, that helps. If it does, please consider the usual like and subscribe, and I speak to you next time.

How to use JSON data in Flutterflow

How to use JSON data in Flutterflow

Scripts