Search a Dataset in @Glide Using the Fetch JSON Plugin #API

glide recently released some really nice features that allow us to query an api or in simpler terms search a data set so i wanted to show you how you could do something like this how to create a dictionary search inside of glide glide and whenever i put that word in it returns different definitions for that search works just to search and searching a dictionary api dynamically inside of glide this is really really good stuff so let's go and jump in and i'll show you exactly how to create this inside of glide so the first thing we are going to need is a dictionary api something that we can send a word to and it will respond back to us with some definitions for that word now there is a page which i'll have linked below called public apis on github which is just a collection of apis that you can utilize so exactly what i did when i was searching for this was i came to this page i did a control f and searched for dictionary and so then here it gives me dictionaries and then i can look at different options for dictionary apis now i went with this one called free dictionary under authentication it says no basically means i don't have to register with their system they're not going to charge me for anything it's free to use now if you're not comfortable with apis i would invite you to check out my apis made simpler ebook which i'll have linked at the top of the description below if we look here they give us a get so get word definition so git is a type of api call it allows us to retrieve or fetch data or just get data based off what we pass into it so basically what it's saying is you can use this url template where you pass in the word at the end and we can see here they're querying hello and whenever you do that it's going to send back some json some data in javascript object notation with different definitions let's go ahead and grab this url template we'll paste it into a new tab let's search for black bear what is a black bear all right so right here it gives us a response here and this really isn't easy to kind of read so let's go and throw this into a formatter and i already have this pulled up here refresh this i'll have this link below too basically you can paste in unformatted json here process and it will give you a formatted json you're not familiar with json it's a way to structure data when it's passed between apis and different systems so lists of data called arrays they're denoted by these square brackets and then you have objects which are property value pairs which are denoted by the curly brackets but what we want is this definition we need to figure out how to get this data into glide and then parse it down to the definition based off the word that we pass in so the plugin we're going to use is called fetch json because we're fetching or we're getting json from an api based off what we pass into it so we can see here there's a place for us to try this out so i'm going to paste in this url paste in that clear that and then here we can see there is a result so this is the we have the array the word black bear and if we look at our json again we have an array word black bear so that's just the full json so what we want to do with this plugin is query down to that definition so this is using the jq query language and whenever we start here we always start with a period so the first thing we see here is an array let's go ahead and get the first item of that array instead of denoting one so when you're using you're querying json the numbers start at zero one two three instead of one two three four we'll start at zero and this is just how you query down into json when it's an array use square brackets with the number in between the other thing that you do whenever you're querying json is getting a property so to get a property you just do another period and then the name of the property in this case let's get word and then this gives us the word but actually what we wanted is not the word we wanted the meanings so let's copy that property so instead of word let's paste in meanings and this gives us the another array of all the meanings let's get the first item in that array and then right here we want to go to definitions so i'll do a dot definitions and here we want to get the first definition so i'll do 0 from the array the first one in the array and then we want to get the definition which is the last property all right so now we have queried down using the jq query language to grab the definition for whatever word we pass in so if we were to pass in another word like black it's going to give us a new definition awesome so now we are querying this api based off the word we passed in and it's giving us a definition back and so now we want to create a glide app to dynamically do all this for us where we can type in a word and the glide app will display back to us the definition or definitions returned from the api for that word let's jump into that now all right so if you haven't used glide before i will have my referral link below where you can sign up but basically glide allows you to create apps that are instantly publishable apps and websites rather and it's just a really great way to create software so i'm going to go ahead and log in here and i'm going to create a new project and i'm actually going to use the new glide page product which is in beta call this a dictionary it's the name of the app i'm going to use glide tables and i'm actually going to just go ahead and remove all these tabs and all of these tables here create a new glide table and we'll just call it word so i'm gonna go ahead and create the one column that i do need to start out with which is our search word gonna be a text entry and i'm gonna make this user specific what this does right here is as different people are visiting my website i want them each to be able to insert their own word i don't want everybody to be updating this one individual cell this field this search word is going to be user specific so that's gonna be the only column i need so i'm gonna go ahead and delete these other ones all right so let's go back to the app interface and let's delete these i need to create one before i delete that one so this new page is gonna be based off word and we'll just call it search and then we'll delete this back office so now we have this one page for search and so here let's delete these two components and let's just add a text entry component and it's not showing anything right now and this is because there's actually no place for you to actually enter a word let me go ahead and create a cell so i'll just say cell seal spelled out totally wrong so here now we can actually start entering things so let's do like return and then now we see this reflected here and i want this to be labeled as just search now what we need to do is pass this word that they're typing in into a url and get the response back from that dictionary api so all this is going to be done in the glide data editor so what i'm going to do is create a template column let's go ahead and paste in our url that we've been using so basically it's a template that we can then substitute data for so i'm just going to put in word here so in place of word let's pass in the search word than that you can see return is there if we update this it updates there so this is the url the dynamic search url now what we want to do is pass this into the api and to do this we're going to get a experimental code column and this is just letting you know this is all experimental beta so understand that and we need a url for the tool that we're going to be using so if we go back to the glide plugin page let me move my face here they actually have a link here that you have to copy so you copy that link press that button and then paste that in here and then load that in and then it's now using the fetch json plug-in so what what's going to be returned is the response from our search so i'm going to label this search response the url that we want to fetch is the url we just created the search url and then from the response we want to parse using this jque query that we created earlier so i'll pass that in there and it's saying it can't do anything it's probably because we have a bad word replace this with bear and then here now you can see we have this definition uh as a response so let's go ahead and display this on the screen so we can come to this and let's get a rich text and let's just display in here that response so now if we based on other things we now see the response and so now we're able to pass in data and get that response we're basically fetching we're getting that data we're searching an api inside of glide this is really really cool so now we have this really cool dictionary search api so looking up the definition of a word but as you and i know some words mean multiple things and therefore there are multiple definitions so i wanted to take this one step further and show you how you can display the different definitions for the word i went ahead and searched for bear so my word was bear here and as you can see we have a definition so there's definition one definition two definition three and if we collapse that we can scroll down some more and we see there's more meanings for the word so as it is a noun so up here bear as a verb appear bears a noun and there's definitions down here so what we can do is actually go back to glide come back to the data editor so here in the jq query right now we're getting the first of basically everything to give us our definition but what we can do is actually do remove that zero and what this is going to do is return a list of all possible definitions that are in that path remove that zero done so now we go back and you can see there is a list of definitions here so we can do is now format this a little bit better with another template column template and i'll do we'll call it clean definitions oh not a relation a template and so now let's start to replace this text a little bit so at the beginning of the list you can see we have the square bracket with a quotation there so let's go ahead and replace that with a with some html so we'll do a ordered list and then start start a list item and then in between we have a quotation a comma and then a quotation and i'm just going to kind of breeze through this because i've already kind of tested this out so we'll do stop a list start a list item and then at the very end we have a quotation and then a closing square bracket and so then we'll do a closing h list hm html tag and then close the ordered list html tag and then we'll click done and now this is going to format this inside of here i freaked out there for a second but we have to change the column this is pointed to now this is pointing to clean definitions and so now as we search we get all of the possible definitions displayed and so that is how my friends i would create a dictionary uh using the new fetch json plugin inside of glide all right so i hope you enjoyed this video i'll have this app linked below where you can test it out again i also have my apis made simpler guide linked at the very top of the description so be sure to check that one out if you like this video be sure to subscribe and as always i'll see you in the next video happy coding

Channel: Darren Ambles

Views: 338

Keywords: tutorials, darren, nocode, coding, apps, mobile, web, android, ios, glide, dictionary, fetch api, fetch json, api, json, plugin, glide page

Id: wWEkO8a4WbM

Length: 11min 55sec (715 seconds)

Published: Wed Oct 20 2021