Dynamically Creating Columns from JSON API call in AG Grid

in this video we're going to learn how to dynamically create the column definitions in a g grid from a json response received from an api call i'm going to use to get started with javascript grid in five minutes blog post as our basis for this because there's some code in here in a plunker that i can amend now you can see that what this code is doing is given a fixed set of column definitions it is making a fetch call essentially on an api taking the json that is returned and putting it in the grid so if i have a quick look at the json that's returned here we'll see that it has three fields make model and price that match on to the column definitions that we've got in here this is the way we would normally work with a g grid we'll define the column definitions in advance because it's a fixed set of data that we're going to display to the user and we've got everything under control but sometimes we might want to dynamically populate the grid from an api and we can do that quite easily let me just format the code here so that we can make this easier now to demonstrate this i'm going to remove all the column definitions here and i'm going to use the values that returned in the json to create those headers now one thing that people are not always aware of is that when we're creating our column definitions we don't actually need to give it any more information than the field name which point it will display the information so all i have to do is pull out the field names from the data in the api and we're good to go so first of all i will get the column definitions from the api and then i will clear that array i'll just do that by setting the length to zero then i'm going to take the keys which are in the returned data and because all the data uses the same keys i'm just going to take the first line and use the fields in here as my headers so now i will iterate over those keys and for each key we want to add to the column definitions array an object where the field is the name of the key and then the only remaining thing i have to do is use the api to set the column definitions back to the array that we've just populated and now we are dynamically creating the data that's from the json file and just in case you think i'm cheating i'm going to use the harry potter api and let's take all the characters so this is a call that we send and we'll receive a json file back with all the harry potter characters i'll put that into our plunk code and the grid will refresh with a new set of data and a new set of headings so it's really as simple as that once you know how to access the api we can dynamically create the columns in the grid and we should be good to go to discover more about ag grid go off and visit a g grid dot com you

Channel: ag-Grid

Views: 379

Keywords: ag-grid, javascript data grid, react data grid, angular data grid, vue data grid, ag grid, javascript datagrid

Id: Wj_LIVmUwYQ

Length: 4min 0sec (240 seconds)

Published: Fri Nov 19 2021