Master JSON Sorting & Filtering in @FlutterFlow: Unleash the Power of API Responses

hello everyone Thanks for tuning in in this today video today we are going to talk about sorting and filtering user using Json before we get it before we start actually I just want to see that I'm cursed officially and that every time I try to record a video for some reason test mode it's not working for me as you can see right now I have a total of 30 minutes in my test mode and 17 minutes I I'm left with 70 minutes so almost 15 minutes uh the test mode is not loading and I try to answer reload like four times and it's not working so yeah sometimes test mode is not working but run Mode still works so that's good and yeah so today we are go like I said today we are going to talk about sorting and filtering using Json using Epico and like 99 of the percent of the time the return will be a list of jsons so the idea today is that we are going to have uh uh we're going to have a list of users so let me show you which database or which apical we are going to use uh I'll I will post the link to this uh epic call now it's a get applicable I'll post the link to this in the description so you can just do the same uh try the same code and set up as me but yeah the idea is that so let me just show you how it works so the idea is the Sorting so like you see over here we have the names I outputted the name email and the company name so if I go over here this is the name this is the email and this is the company name so let me Zoom a little bit probably so you can see better so like I said this is the name email and company name and if we go over here I will stop the test mode because we can see that this is not loading uh yeah you can see it here and the second name is Ervin and the third main is Clementine and second name is Irving and the third name is Clementine okay so that's good it's the order it's the Sorting it's uh the right sorting that it's coming from the app the Epico and then let's try to sort it so if I sort it by name you can see I am sorting the list by names and uh successfully and when I just click it it just sorted the list instant and then if I go to email so if I click on email and I want to sort it by emails you can see again that the list is sorted automatically uh dynamically and instantly and if I click on sort by company name I can click on sort by company name and now you can see that Abernathy it's the company name that it's on the top and the second company is considering or whatever it is and Nicolas Works in this company so this is the this is the one uh this is the the Json this is the record and this is the name of the company so what I want to show you is that you can actually sort even by Inner uh Json so if so this is the May Json and this is the inner Json and you can sort with this code that I will provide you you can actually sort by Inner code so for example you can sort by the street address uh the street uh wherever you want to and the last thing is that we have default sorting so if I click default sorting it will actually revert back to um to the to the main uh to the initial sorting that we get that we got from the apical and also you probably saw that this is going to be uh back to the default value which is sort by and then this is how sorting works and let me show you how uh filtering works so let me say that for example I want to uh I want to see every name that begins with clay meh for example and then I want to the string needs to condense because I have two options here equals or contents so let's contains and then what I want to share to get name what I want to filter name email and Company let's say I want to filter by name and if I click filter now I can see that only two names in the they are outputted and also that you can see that I have this reset button which if I click everything go box to the way it was initially so this value it's empty now and those are the initial states of the Wallace so in that in mind let me search uh by so let's say that I want every email that contains the word this or that this let's say dot best and then I want to be contains again and I want to be equal the the email contains and it's filtered so in this way I get April that space build it as basic Katrina does this and that's correct if we go actually to this list then I click and I search for that base we have one two and this is a website this is not an email three so we have three results now what is correct and here we have the three results as well we can actually I didn't put that but we can actually output the results as well it will be very easy I'll I will try to not forget to show you so let me actually show you how this works and let's start with sorting but before we actually start with sorting let me actually uh so let me actually show you how you can show the results as well so if I go over here and let's say that we have let's say that we want to first of all let's let's copy the condition let's copy the condition then let's go back to and let's warp up this inside uh Row for example and then in this row we can have we have a text and this text will be a combination of text and this will be like total results and then that's also results will be uh boots coming this is coming from the user's data so this is coming from the App State user data and we go and we we not uh sorry we want to take only the number of items so let's take the numbers of items and that's it and now we can actually paste this so you can make a condition over here paste this and condition over here and then we can safely remove this condition from here so it's the button this is the condition let's remove it okay now let's run this in the meantime while I'm showing how I did that and then we can actually see if this works or not okay so this is the page let me Zoom a little bit what I have in this page is the title which I renamed this time so it's already in filtering and then I have a drop down so in this drop down like I said we start with the filtering oh sorry we start with the Sorting like it says over here and then what we have here so we have the name email company name and the company name keep in mind is the path to the Json so if you want to sort by company and the name of the company just make sure that you write company with lowercase or uppercase it depends on your apical make that sure as well both needs to be the same if you for Epic from your Epico this name is uppercases just make sure that this is the defined options value it's uppercase as well in my case it's only lower cases so that's why I have name with lowercase's email with lower cases and like I said if you have deeper levels make sure you write company dots and then what you want in my example is the name of the company okay and then the final thing is the original one which will be sorting by the original one but we'll get through it a little bit this would be the last thing that will I'll explain about the sorting and then we have the labels so so this is important that the values this is like very relevantly new like from a couple of months ago that the values and the labels can actually be different things uh so valid labels can actually be different things and then we can actually uh we can actually write sort by name sort by email sore bar company name and default sorting so we can actually write wherever we want to but the values is actually the one that matters so this is how I set up my drop down and if I go over here on my drop down I have three actions in total so first of all I have a state a condition which is actually checking if this if the a drop down value it's original so if it is original then my action is that I have users data so let me just show you my initial setup so let me just show you so before we continue actually with the sorting and the filtering I wanted to actually show you uh while working with the Json data and appicos what is the actually the the most efficient way you can do this so if I go back to my apical so if I go to epicos and this is my apical so like I said this is the address it's a very simple apical it's a get request and this is the optical and we have users so if I go to response and just click test Epico this is the uh this is the response and you can actually see that this response is the same exactly the same as this one and of course they're the same because when we actually open this page inside a browser it's also a get request so that's why we're getting the same response and now if I go to recommend it and then I can actually see all the recommended path Parts uh for my request from the app from the Epico but so this is the most important part is that I never actually use the recommended parts and I never select none of my apicos I never use this function actually and the reason for that is that when I use this function I actually when I use this functionality to select something so let's say for this example I want to use the name right so let's let's select this and then go to selected so now I am having a list of names this is outputting a list of the names that I get from my response but this is not great because in reality what I want to have is I want to have the entire Json so this is so this is one Json and containing every everything or all the information that I have from the response and this is another Json over here so this one is another Json I can't mark it I don't know why but you get idea right so you get this is the whole data that you get from the Json and if I actually try to get so for example let's say that I get the name like I said this will only get the names uh outputting the Json so imagine that you only have you only have this information so only have this information and everything else will be stripped out which is not what I want and apparently and I think this is like most of the user it's not what they want so how I set up my epicos now so like I said if I go back to epicos I have this apical this is the arrow it's a get request and then I have two things in my app State and this is because I'm using sort and refiltering if I don't use sorting and filtering I will not have app States as well at all sorry and I have two up States one is user data which is a list of jsons and I have initial data which is a list of jsons again those are empty over here I don't have anything anything here and persistent it's actually false bold in both uh virus and then if I click over here this is how I done I created so users data and this would be a Json and this will be a list of Json I'll click create I'm not create it right now because like I said I already created and you can see it over here like I said this is the user's data and I have the initial data which is a list of Json again so you have to make sure that you have those two and then if I go back to my setup it is actually uh it is actually first thing that I do is that when you're using appicos you have two ways to call your app because first you can call it from here which is a backend query and if I add a backend query you can have an apical and this is users and this is one way and another way you can do it with with the action on the scaffold for example and I can open this so this is on page load then I have the same Epico so you have the back and call apico you can see it over here and then now my apical is users this users is actually will return in my case uh they're the most important part is that you have this action output variable name which in my case it's user's data will be actually the whole Json so imagine that everything here all everything here will be inside this variable user's data and then I make here uh that they make here uh an Epico actually I just wanted to say real quickly that if you want to if you want to get a Firebase data because Firebase data you cannot get it from action you can actually do this as well you can follow my channel I already did a lot of videos about that how you can do it if you in case you need it like I said and those are actually now over here so you have the like punch insert Bunch update and I have uh retrieving lists and single documents from Custom function in further flow so this is how you can actually do this the same with the Firebase but like I said uh this is not about Firebase this is about apicals so this is the user data that I'm going to get the response like I said everything that is over here and then if the if the apical is successful this is like a normal uh normal apical response I think not sure but I think this is this should be Epico users data and this would be this should be like that yeah it should be like that I don't know why it says maybe this is the old name and I didn't change it I don't know why it works but anyhow so if I click over here so everything if everything is true and I get a response what I'm going to do is I am going to uh to find update Upstate find users data which is the list of json's set value and that this will actually overwrite if I have something in my users data it will actually override it when I click on set value into overwrite it everything and we'll write the new value which the do value it's uh dollar sign Json so if I click over here like I said this is coming from action outputs it is user data and then Json body Json path and then custom and adjust the door side I put here only the dollar sign and then which the dollar sign actually means that I I want to get everything that I have in my response everything here like the whole thing like everything here this means the dollar sign and if I actually click on name like I created I actually didn't save it but here you are the path that you created and if I save the name and I put the name it will only say the nips it only like I said it only take the names so that's why I don't do it like that make sure to don't do it like that just make it the way I am doing it I think this is the most efficient way so like I said because this is getting all the information so is Json path name and then custom and then the lower side and after that I put the whole information over users data and the second thing that I have to do is I have to do the same I have to actually do initial essentially the same thing but put the same data inside initial data and why I'm doing this is because I want to keep the initial data because when I'm resetting my sorting and my filtering I'm actually reverting back to my initial data that's why I need to have the initial data and the rebuilding it to be rebuilt current page okay so we're done with the three actions on the scaffold and then when we click on the Sorting so let's go back to the Sorting thing so when I click on the Sorting uh what I am doing like I said the first thing that I'm doing is that make sure that so I'm checking if the drop down so if the Sorting which is the drop down one if it's equal to original so if it's equal to original that means I want to revert revert back the changes so in this case I'm setting the user data set value to initial data so I'm setting the user's data in upstate to App State initial data which is the initial data and this data never changed and the users data actually change so that's why I can set it to the user's data because the user data change so setting this action like this will actually revert revert back to my original or initial data okay and then no further changes and the second thing that I do is that I want to reset the button so I want to reset the drop down and this is how I do it reset form Fields this is actually something new I don't know if you saw it but you have a new actions which is a resetting and you have resetting forms then you have the drop down and in this example and this is now how I done it but I only recite the the first drop down because the first drop down is the sorting and the two drop downs over here are from filtering so I don't want to reset the filtering I only want to reset uh the sorting and then here uh if it's it's false so if this is not the original if the user didn't select uh so if the user didn't select the original which is for example you select name or email or company uh it will go over here to false and when I go to false it will actually run a custom function so again we have the user data set value and then we are running this through a custom function so let's go to custom functions and the one that I am running to will be sort Json and when I run through sort Json let me show you the actual code for the custom function the code will be available like always in my GitHub so it will be here custom functions and you can click it it will be also in the description below so what is a what is the idea of this custom function it will actually take the data and it will take the the field that you want to sort by so there are two two arguments that the uh they're going to be uh that you need now and what is the code actually doing it is actually checking if you have dot so in my case company if you if it's company that name it will actually check for that and it if you actually take the name of the company and then here's the actual sorting thing that is happening and the end it will actually return the data but this time sorted out and like I said I have I have to put two parameters and the two parameters that I'm putting is the user's data which is the list of Json and this user data is actually coming from the App State this time it's not coming from the output anymore it's coming from the App State it can come from the output as well to be honest it's the same thing and then the Sorting is actually coming from the drop down one so that's why I am saying that this thing should be the same like that's why I'm saying that this name email company dot name should be the same as your response data that is coming from over here okay and then um let's go back to sorting uh so sorry this is the Sorting part and let's go to the filtering so going back to the field so go into the filtering uh so what we have over here so the initial now the initial thing is the same so we have the scaffold like I said we have the Epico and this app it's putting users data it's putting the apical inside user data only the dollar sign and it inside the initial data as well and it's rebuilt current page and this is rebuilt current page okay and then we have the so we have a form uh filter value so this will be the filter value that you want to filter by so for example the name or the the name contains on part of the name or email or wherever we're searching for so we write it over here and then we have the options so we have currently I wrote two options but of course you can actually have as many options that you want but I think I wrote the most popular one which are equals and then contains and we have those are the values equals and contains and those are the labels equal and contains and make sure you write it the values the same way that I wrote it over here because if you don't write it like that the code will actually not work the custom function will not work then we have filter by again filter by make sure that you write them uh here as well the same so if you want to filter by name if you want to filter by email if you want filter by company dot name and company.name like I said it would be a nested thing so it would be company and then dot name it will be the path to the company if you want if you want to get company BS it will be company.bs again with lower lower cases if our data is with lower cases with separate cases separate cases and so on so forth you get the idea so like like I said here is the name the email company dot net and then this is the name the label will be named email and company name and the final thing the most important part is actually the actual filter so when we click on the filter we have one action only one action and this action is actually updating the upstate in the app state that we're going to update its user data and this is a list of Json and this is uh set value and when we get when you uh when you did it with said value it's actually as I said rewriting the the value that we have and here we are getting to again we're getting to a custom function which in this case it's a filter it's filter Json is the name of the custom function and we have here in this custom function we have four arguments one argument we have the actual data which is uh coming from the upstate users data we also have the field which is coming from let me show you which is coming the field is coming from this one uh this is the field sorry so it's coming from this drop down which in my case is the third drop down then we have the operation the operation is coming from the second drop down which is this one this is the operation that we want to do and the last thing is the value and the value is coming from the text field so uh so this will be so let me just show you what I mean so this is coming from the App State so it's coming from upstate users data then the field is coming from the the field that we want to filter it by it's coming from the drop down so if I go to user State it's drop down number three now then we have the operation now which is coming from users sorry which state and this is drop down two and the last thing it's again user why I'm saying User it's widget State text field filters value okay and that's that's about it let me show the actual function so if I click on edit function the function name is called filter Json and we have like I said those four parameters over here so the first thing that we do is that we set a new list of jsons which is list of dynamic and the name of it is filtered list and then we Loop through the actual data we look through the actual data and then we say if it's a match so we say if it's a match so if we have a match put this value to the filtered list and here actually it's something that I forgot to mention is that even if we try to uh to use uh lowercases or upper cases little this will actually still it should still actually work so let me just reset that and let me show you what I mean so if I click that bus and go contains email you should find me those three records but if I reset it and I do it with the upper cases right now and though it contains the email and it's still working so this is the whole idea is that it doesn't matter if it's lowercases or upper cases it will still find the match over here uh and then yeah this is the code like I said the code will be available in the GitHub repo and also in the description of this video and then this is how this works and I actually forgot to mention how I display the data because this is something very important as well so let me go back to the working with apple responses to Json and like I said now the first things first is to take the data so this is the initial uh the initial code to the back end or the initial get request and then when I get the data it doesn't matter if you get it from the backend or if you're getting so it doesn't matter if you get it from here or you get it from like I did from the apical I put it in the sorry the App State so I put it in the App State but the most important part is that go to generate Dynamic children when you go to generate Dynamic children so you can see over here that I don't have my ad backend query it's empty and that means that I actually can use backend queries uh not from the same widget this is very important because I think most of the people are thinking that you have to only use the backend query and generate Dynamic children from the same widget node this is not the case it can come from anywhere it can come from another widget that needs to be upper in the error here or the widget tree it can come from an action output it can come also from upstate in my case and it come it can come also from a pitch parameter it can actually come from any place that that possibly you can think of and then here uh what I'm doing is that I need list of jsons Now list of every anything in this case because Dynamic is anything and then here I'm just getting the user's data which is actually in the upstate so I'm getting the user's data over here and I'm putting it as a my uh as my uh as my value and then like I said the only thing that if if this is coming from uh from a backend query you will put the most important part is that you put the dollar sign as a Json path so let me show you one more thing because I think this is very important uh if I where I'm saving the data and I will get the response and then put the Json body Json path custom and I put only the dollar sign and like I said this dollar sign we actually get my entire Json and that only a certain par certain elements of the Json like that only the names this will get the whole Json and then when I go back over here I have the user now so this is a single user make that sure you understand that there's a single user and then if I go to the name this is how I put the name I get over here so this is I get the I just so you have you so you will have if you set up everything right you have the user item and then you click on the user item and then you have the Json path and you click again dollar sign so make sure that you put a get over sign and then that name so first of all so first of all when you put the dollar sign is the whole thing and then when you put the dollar sign is that you're saying that I want only this one only this one over here okay and then the second one is the email it's again Json path dollar sign email and this coming from user item which is coming from here like I said and then uh the last thing is the company name which is dollar sign dot company dot name so make sure that you have in my case over here uh this is the right path to put and like I said this is coming from this widget generated by children and this is coming from this action this act actually coming from the upstate and the upstate is coming from this action on the scaffold okay great so we are almost ready now let's see actually if the uh if we search something so let me Zoom a little bit so we added so let's put that is not working right now okay so let's put that bus that this email and filter yeah so you can see I have three results now you can also have the numbers of results and let's let's say about what about if the name it's begins with or contains clay and this would be the name filter we only have one result so if I filter this right now I actually have more than one result this stretch okay or yeah I have Clay contains and name and I think I think I know why this is happening I'm not really sure so that we have to uh right now so I don't know why actually maybe because I have the lower case I'm not sure if I click with the lowercase or the uppercase yeah but uh let me show let me search for uh every email that contains lowercase so let me sure that I have two results okay is that right so you have this is the email this is email to and this email three so yeah this is about right it's about right okay and last thing that I want to show you is that because I didn't actually show you that you can actually search for the whole thing so if I want to search for the whole email I put the whole email and put equal to and I put the email filter and this is the whole email so this is how filtering is working and before we actually begin I'll just make sure I just want to make sure that I just want to say you that filtering sorting is okay to do it on the front end but when you have filtering just make sure that the filtering is done through the appico so what I mean on the back end so what I mean by that is that when I go over here when I go to users then I want to get all the users but I want to actually filter them so what I what I will actually do is I will have a name and this name will be a string and I will have I will have a name and here in the query parameter I will have a name here as well let's say email let's say email and this would be my email and this will actually come from from variable and this would be the email and here I actually can have email so this will actually generate so if I go over here and I'll say let's say that the email is flutterflow.io and then support at Twitter polio or contains or contains this uh to the flow.io this is actually my my link this is my link it's automatically putting uh putting a question mark and then the the fields name and then it goes to wherever we are searching for now and make sure that like I said it's very important to make sure that when you're using filtering uh do it on the back end don't do it on the front end do it in the back end and for the sole reason is that is that when you are actually making the when you're actually doing the filtering through the back end you're outputting your response will be for example 10 records and not 10 million records on or 1000 or 10 000 records because in this way that I just showed you need to actually uh you actually get uh you actually get the whole response and then you will filter it through if you want to filter through the whole response okay that's a good idea you can do this but uh if you want to actually filter the best thing is to filter this way there is another way actually so this is one way and the other way to actually filter the data will be to actually use use uh uh add to backend query and then you can use cache data as well but using cache data this way you can actually you cannot actually put the result in the upstate and pulling the result to Upstate the sole reason for putting the result in the upstate is will be to build to to be actually Dynamic so we don't need to actually refresh the page or do something else it will be actually Dynamic it will be actually it will actually work the same way that filtering and sorting is actually working in Firebase itself so yeah I hope that worked and I hope this actually this video actually learned you something and I hope it was useful and I just wanted to finish that saying that this is my calendar and you can actually we actually have this live events which are every Wednesdays and you can actually join the Live Events if you have any questions make sure to uh to subscribe or not subscribe but to submit to Live Events because we have a limited uh spots and right now for the next live event we only have three spots so yeah make sure that you uh that you put your name here okay so thank you very much for joining like I said and have a nice day great goodbye take care

Channel: Dimitar Klaturov

Views: 7,656

Keywords:

Id: x-kivZ7ChD8

Length: 42min 26sec (2546 seconds)

Published: Mon Mar 27 2023