 In today's video, I'm going to show you how to make a plugin of a table that looks like this. You shall also add some JavaScript plugins that will allow us to add the different charts that you're seeing right here in the example. You'll see that we don't have any data showing up in here, but what I'm going to do is I'm going to pass data into our script right here and we call that localizing data. We'll be able to get the data that we passed in there and then just throw it inside this data set that we have right here. So in this table, we are able to change the number of entries that we can see to maybe about 50 or 100 and we can be able to search for something like people that are in a position of software engineers or we can look for something like those who are in London and we'll have all of those listed right here in our table. Now, of course, this uses JavaScript and HTML and CSS to do. Now this particular table uses Bootstrap. We shall be able to embed it inside our plugin and we are going to use data that's coming from an API and for this example, I'm going to use local polling data that's coming from a GitHub repository. We shall pull this JSON inside our WordPress. Now this particular JSON file is over 18 MBs in terms of size and if we had to pull that into the website every other time a user visited the site, it would make this very heavy on our server. It would make it heavy on the user's internet. So what I'm going to do is just put this in a custom database table and then we shall feed that data from our table that is on our site and then feed it into this data table that we've set up. So first, let's set up our plugin and let's set up our unique short code that will allow us to add this table and then we can be able to sort and filter all the different information we have like I'm doing right here. I'm using local by flywheel as a local server and that allows you to do a couple of things and then I'm going to go into the app folder which will give me my public or the root folder in this case and then I'll open the WP content folder. Inside that I'll go to plugins and I'm going to start up a new plugin that I am going to call. I'll call this take a press data tables short code for now and then I'm going to drag and drop this inside my editor. I'll then open up a new file which I'll give the same name as our folder before take a press data tables short code and I'll add the PHP at the end and now we have a new PHP file to start with so I'll start this up with PHP need to correct that and then on saving this I'll then use my start plugin extension snippet that allows me to add the plugin name author and all that other information. Now of course we'll add this here call this take a press data tables short code and then of course we'll add a plugin link which I'm going to add from my github so have github.com slash ytt take a press then I'll add of course the extension and call it take a press data base table short code then I'll just have my plugin in there I'll add in my name this plugin adds a short code embed on pages in wordpress I'll need to add data tables so this plugin adds a short code data tables embed on pages in wordpress we'll just need to highlight that and then we'll have it as version 0.01 we'll change this to gpl2 or later so that people can fork it and then I'll add a text domain which is take a press data tables short code now we are ready to actually begin so I'll save that we need to add some quick security here and look for defined and say if we don't have a global apps path we are going to just get our plugin to die and as we are killing it we should be able to add a message and say unauthorized access and I just need to add the letter z there and this will be good to go so this is our basic security forgive my bad typing today and then the next thing we're going to do is we're going to have what we call as an admin page so that when we come to our wordpress right here we should have a menu item that we can click from here and add it so what I'm going to do is come back here I'm going to add an action that's going to tap into the admin menu so the hook we are looking for is admin menu and then right here I'm going to add a new function which I'll call take a press I'll make this short for what we have there data table so I'll call it dts for data base short code dtsh and then I'll call this menu item so now that we have this we can copy this function name and then I'm going to have this function pasted here with its name and then we'll start running it now of course the first thing I'll do is just say equal what we have here and I'm going to say this is a new page in admin so I'll save that and then I'm going to go back into the plugin section I'll reload this and now we have our new plugin showing up here with the description and everything else so I'll click activate and you'll see that we have something showing up here as an echo so in order for us to have the page showing up here so in order for us to have a proper page like you see the plugins and the pages and so on we need to do something extra in our code so I'm going to come back to this particular function and I'm going to add menu page and that's what I'm looking for I'll hit enter so that I can use the hints that are given here so we need a page title first and foremost so in our page title I'm going to make this translatable so I'll use those two underscores with a comma and in here I will pass in my text and call this data tables short code results and then of course we need to pass in our text domain right here so I'll copy this and then I'll pass in as a text domain so save that and then what I'm going to do is we also need a menu title showing up here now the menu title is the same thing that you see here like appearance so I'm going to duplicate this so that it's usable and I'm going to call it data tables and then the next thing we need to have is the capability I'll set this to menu options we can have an administrator we can have an editor we can have a subscriber or the different user roles that WordPress actually offers so you're basically saying the person with this kind of rights should be able to use this but when I add menu options it leaves that open for us to use other plugins like wp user manager and so on to be able to sort that out now I'll add a new function that I'm going to use and I'm going to call it take a press dtsh show page and that will be the function we are going to add our echo and so I'll copy this and I'm going to add that as a new function right here add its name open it up and then I'll move this echo to the bottom of course this is offsetting my typing I'll clean this up and then what we need to do after this function is add a menu icon for now I'm going to use dash icons which is part of WordPress and the dash icon I'm going to use is a cog so I'll say dash icon dash cog and then the position that I want to use I'm going to use 16 for now and you can find out what position to use by going to the WordPress documentation and you will see all that's available I'll add a semicolon here at the end and then I'm going to save this and then we shall come back here to and I'm going to reload this we seem to have an error right here so I'll go back to my code look at it and I'll see the add action is true we have this function we're adding add page and I think my error here is manage options not many options should be manage options so I'm going to come back here reload what we have and you'll see that we have this little database tables showing up here now the only problem is we have a function that is expected and we are seeing this is in the wrong place so I'm going to go back here and realize actually didn't put a slag for our particular page so what I'm going to do is just get this short code right here and I'm going to change it to be the slag of our page and I'll just make this short for DTSH save this and then I just need to look at the page that we have here and when I reload so I'm going to go back to our plugins right here I'll reload and you're going to see our data tables actually comes all the way up here because the function has all the necessary items that are needed so I'm going to come back right here click on data tables and you'll see that we have this new page that's saying new page in the admin of course I've updated my wordpress to 5.61 so that I remove that notice that was here before and I want to make a few corrections one to get a proper icon here and then we want to make our particular title to also look like when we go to posts and we look and see this whole posts here I'll just inspect it we'll be able to see that it is and a div called wrap and we have a wp heading headline showing up there so let's do those two things the first thing I'm going to do is go to dash icons you can google this and when you google it you'll be able to see the resource on the wordpress.org website now I'm going to look for something that looks like numbers and that doesn't look like something that's already existing so we have things for the block editor we have those for the databases and I think I'm going to use this I'm going to use the chart line so I'll get dash icon chart line come back to my editor select the dash icon code replace it and save and then the next thing that I'm going to do is come here and then I'll escape my PHP and open it up again and all I need to do is just add a div here with a class of wrap we need to make some corrections wrap here and then we shall have a heading so header 1 dot wp heading dash inline and when I do that I'll have a proper heading so what I'll do here is say data tables javascript in wordpress so I don't need to echo this anymore right here I'll save this and then come back here click our data tables and you'll see that we have it looking nice and of course we have this little chart showing up here so we are good to go so the first thing that I'm going to do is add the html that comes from here so I'm going to get the html copy this I'll select all the html that comes from here copy that it's quite a lot and then I'm going to just dump it here of course we need to tab it properly save this when we reload this you'll see that we have all the data here that's static and of course the different things in the table now what we want to do of course is we need to add the css and the javascript attached to that so I'll get the link to this and get this javascript I'm going to save it so I'll come to page servers and I'm going to save it inside my plugin I'll just add a new folder which I'll call assets I mean assets is where I'll have this jQuery standing out in the javascript folder so I'll add another folder and then I'll save that in there the same thing I'll do for the css and go and click this tab I'll save these pages and then of course this needs to go just one level up into assets and then we'll create a folder called css and of course we'll save the css in there and now that we have our assets showing up right here it's time to enq them inside our javascript so I'm going to use an action and the hook that I'm looking for is actually admin enq scripts so admin enq scripts this will allow us to add javascript and css right inside our admin area so I'm going to add the function that we shall be using to do this and then I'll call it take a press enq script and of course I'll copy this come down here start up the function paste this and then we can be able to call all the javascript and css right here now what we need is the wp enq function and we are going to enq the style first and that requires us to have five different items passed into the function I'll call this dtsh in short and then I'll call this css for the handle we need to have the source and we're going to use the plugin directory url and that's a function that we find in wordpress and this will require us to first passing the file and we are trying to pass in this file right here the file that we are trying to pass in is we are going to get our php and we are going to add on a couple of things for example we are going to go a level in so we're going to look for assets then we're going to go to slash css and then we shall add our name of this file so I'm going to choose to copy all of this and then I'll pass it in here the next thing we need to do is pass in the dependencies we don't have any dependencies so this can be an empty array dependencies and then we can pass in a version which is 1.00 and then the other thing that we're going to do is just say all so that this goes for all media types that is mobile tablet and desktop so I'll save this let's come back to our backend right here I'll reload this let's look at our console and we see that we have an error because I made a misjudgment in the code so I forgot to close actually our file right here I'll remove that extra closing bracket I'll come back here I'll reload my page and you will see that we actually are having this database table css loading variable in here now the other thing that I need to do is just bring in all our styles so I'll bring in all the scripts by saying wpnq and what we are looking to do is add the scripts it requires the same thing almost we need a handle and the handle is very simple I'll add this css dtsh I'll add javascript that's our handle and then I'll just copy what we have here and then also put it here and what we need to pass in is the assets and then javascript and then the name of the file so js and then this is similar we just need to change the file extension to js so I'll copy this paste it here and change this to js and the next thing we need to do is also pass in our dependencies so I'll type array since we don't have any dependencies for this of course a comma here we need to change the version I'll also make it 1.0.0 and then we can pass in a true or false for it to either be in the footer or to be in the header I'll add a semicolon save this come back here reload you'll see that we've messed up because we don't have this file system showing up right here so I just need to remove this extra css and assets that I added save this come back here reload and you'll see that we are doing fine in our debugger we actually have our plugins and we are loading our javascript showing up here and of course our css also shows up in our network now we need to initialize our script so that we are able to have this looking just like this so what I'm going to do is just copy this and I'm going to create a new javascript file in here and I'll call it init tables.js and then I'll paste in our code right here so the only thing that we might not recognize is I'll just add a variable of the dollar sign is equal to cheer query add a semicolon save this here and we're also going to enqueue this so I'm going to call it in and then I'll add on the word init here we are including the init dash tables the js and it has the dependency of this particular file so I'm going to just add that dependency and we also know that this javascript will have a dependency of the jQuery that's called in wordpress so I'll just add jQuery here and then save this so I'll come back here to my admin area reload this and you'll see that we have our table loading it's not breaking anything it's just that we need to look at the html and see that we have an id here which is of the takeypress data tables and I need to change that inside my init tables and make it the same so that we don't have examples showing up so I'll reload this and now you can see that our javascript is working well we are able to change all of this to work like we initially had it working right here so what we are going to do now is just do a quick search we are able to add those searches the only thing that we need to do now is actually just make this content that's coming in here dynamic now that our javascript is working you will see that we are loading our javascript here we are loading our css in the network area and yet when we go also to the posts you'll see that we still have the database css showing up and in the debugger this is also still showing up yet we are not using that style and javascript here that's a very bad use of the wordpress resource that we do have however when we are admin and queuing we actually have a variable that's passed inside this particular action so let me vadam this hook and then you'll see what goes on behind the scenes so I'll reload this and you'll see here that we have this page is edit.php if we go to data tables we have this string showing up so I'm going to copy this string right here and then I'm going to come back here and say if our hook is actually equal to or is not equal to the string that we have there then we shouldn't run this code below so what I'm going to do is just a return so that I can kill the process right there and not have this running anymore if it is not this page so I'll reload this and you will see that we have our scripts running very well here and if we go to posts we actually don't have the scripts loading up right here or even in the network tab when we go back to data tables you'll see we have it loading and in our debugger you'll see we have this loading right again so that's a very good addition to our code to make our code better and to also increase the performance of our app that we are making so look out for those small details that will help you improve your app now what I'm going to do is remove most of these table rows that are adding the data because we are going to make our table dynamic and you realize we don't need this table foot below so I'm going to comment this out so that we can have the table head content and the table body content dynamic in nature coming from our URL I'll go back to our repo and I'm going to get this JSON file I'll copy it and then I'm going to come down to our code here and I'll add it in the comments so the first thing that we are going to do is just call this URL we'll be able to save this data in our database and then we can dump it inside our table right here I realize that I'm really terrible at commenting my code but this should be a habit that you develop so that you can be able to read your code even later so let me add some comments to make my code better add menu page admin CSS and scripts for data tables I'll add a one liner and say escape function if not on data tables page in admin and then add table to admin area so I'll be able to sort of pick up at least my code and be able to follow up on what's going on so I'll copy these comments that we have here I'm going to come back to our page and actually add them down here because this is where we're going to make our call so that every time we click on show that page that's when we call to look for that particular item so in here I'm going to add an option and call it the data option and that data option is going to equal to get option which is something that we get from our database in the options table and it has two variables that we need to pass in the option is the name of the option that we are saving that information so in this case it's going to be called our JSON results so I'll add this one take a press so we'll add our option as take a press JSON results and what I'm going to do here is check if this exists if our data option exists then we shall run whatever is below if it's false if it does not exist so I need to add a not exist here then what we're going to do is return so let me go and run that reload this and you'll see nothing is happening here so let me vahdamp data option and then you're going to see if we have anything so you'll see that we actually getting back a false right here so I need to make a correction here and say if it is false then we're not going to run anything below so I'll save this you see that it's false nothing is happening if we had a data option then we shall run the code that's down here so let me push this up because we're going to try to get our data from this API so we're going to use this very information that we have if this is false then what we are going to do here is we're going to go and say wpremote get and this requires us to have a URL and some arguments to run this particular function so I'm going to change this and call this our URL and then the arguments that we need to pass here are going to be very simple so I'll pass in the args and say our args are an array of data and what we are looking for is we want to have headers which is an array and in that array we just want to have the content type of JSON so I map this then I'm going to say application JSON that's what we want to get back now let's see what happens when we actually get this information so alva dam whatever we get after the root mod wp get so I'll comment this out right here so we'll say vada lpremote get into a variable which we'll call response and then from our response we are going to be looking for something in particular but for now let me just vadamp whatever we get and let's vadamp our response and stop running save this reload here and you'll see that we get back content here and the part that we are looking for here is actually the body so I'm going to go in here and then get the body where we get the body is by saying the body will equal to wpremote retrieve body and we're going to pass in our response and then once we get that body we are just going to make sure that it's actually not empty or null it is actually doing the right thing so I'm going to come here and say if it's not null if our body is not null or if it's actually true so if the body is true or if it is not empty so we say the body if it's not empty then what we are going to do is update that we're going to update our option of these results so we copy this paste this here and I need to just change this to update and the update option takes in the name of the option we want to save and then we also have to pass the value and that value in this case is going to be the body so that's what I'll do and then after doing that what I'm going to do here is come back and check if it's false we've done that if it's not false let's just random what we are having as our data option so data option I'll save that come back here reload and you can see now that when I reload this we have this information right here and if I go to my server and I just open the database go to adminer then go to options select data and just search for take a press so I'm going to look for take a press Jason result you will see that we have this information in here and you will see that we have a string of data right here so what we're going to do is we're going to decode what we get here the whole point of us saving this option is so that we always have data coming in so what we're going to do is just Jason decode that and then we'll use it in our table let's say we're getting our information our data option so we shall say our data is equal to Jason dash decode our data that we have here and let's vadam this so that we can see what we are working with so let's get the data save this here we reload here we'll have this object that has all this information so we can get a district code and name a region code and let's get a region name those are four things that we can get in here so what I'm going to do is I'm going to loop through to get this 146 items I'll come here and then I'll open PHP and in here I'm going to save for each and we're going to say data as data line for each one of those I'm just going to echo the data line and let's see what we get in this point so I'll save this I'm going to comment this out so that we don't see that datadamp so I'll reload and you see it says it's an object that cannot be converted to a string which is good so I'm just going to vadamp what we have here and you'll see that we have the public district code region and all of that so I'll copy this and this is what I'm going to do instead of vadamping I'm going to get the data line from this point and I'm going to replace it on all these points so that we are going to pick each individual item from the data line so I need to pass this here change this and all we need to do is just take this away so we know that this is the information we are using in our PHP so we can use it in our body so I'm going to cut this and just put it in the body area so that we can just have a static header right here so I'm going to get district code change it here district name change it here region code I'll copy it pass it here and then I'll get the region name and also pass it here so for these other things I'm going to just take out because we don't have any extra data coming in I'll clean this out and then what we're going to do is just have a TD for each one of these so I'll move this table row paste it here and then I'll tap this in here and we're going to say for each we're going to have a TD and then close it off after echoing this so we're going to echo each echo pass this here this and then we shall concatenate we shall concatenate the closing table div right here so we just need to do the same four times and then I'll just cut this and paste it here so that I save on some time so take this out remove the vadam we actually don't need this anymore so I'm going to take it out so that we just know our table row is getting all these table divs save this and then I'm going to come back here reload you'll see this is showing up but our details are not we have an error here and that's because this is an object and not an array so we just need to use this little arrow to get that sorted and then I'm just going to take this off as well and then take this off as well I'll select this take this off save this and then I'm going to come back here and reload and you will see that we are having the individual items here now I've broken my loop so I need to just go fix that and know that we are doing there for each we need to actually echo this table row inside here so I'll echo and then I'll also echo the closing down here so pass this close this off and then take out this so that we have a proper table that's working so I'll save this come back reload and you will see that this is working well so if I want to do northern can search for the northern I can search for those with three as a regional code you can search for maybe one district and you'll see that we have that information showing up I think this works out so well for you if you want to have this plugin showing up in your admin area but you can also use this the front end if that's something you need I have another video here that shows you how to use data on the front end just like this it allows you to add the table you allows you to create a short code so you're able to get that and use it just like we are using here so the video is actually linked in the description below of how you can learn to use this now there can be a difference you see right here we're working with html and that's where we're adding our dynamic data but sometimes we have to pass data into javascript itself and what do I mean by that now what we're going to do is use chat.js which is a javascript plugin that allows you to use different kinds of chats for example you can have basic line chats like this could have stacked bar graphs that allow you to do things like those or you could choose any kind of chats like this pie that we have here now of course the way this data is passed is by using javascript right here and so what I'm going to do is I'm going to copy all this javascript and then change the part where we were putting our particular tables right here so I'm going to use git to allow me to branch out here so I'm going to use my integrated terminal what I'm going to do is say git init and I'm going to git add and then I'll git commit dash m and I'll say adding a data table and that will allow us to do that so what I'm going to do now is just say git checkout dash b which is going to give us a new branch and that new branch we're going to call it chat jas so if you don't know anything about git I have a video that shows you how to git in the command line but also I have one if you don't like the command line and you want to use the git GUI that's the graphical user interface that video is also available for you in the description actually below this video so you can be able to learn how to use git and what I'm now doing is that if I use my git and say git branch I'll be able to say that I have two versions of my particular code so now I'm going to add in my chat to jas I'm going to change the static data that we had here and I'm going to put something completely new I'm going to select this and erase it then I'll add the new code right here I'll properly tab this in we have javascript showing up we have our canvas showing up right here we need to add our chat jas I'm going to copy this then I'll replace it here where we include our javascript now right here I'll remove the style because we don't need it I'm going to use this script and paste in the chat jas script right here I'll remove this because this is not how we are linking our javascript and then finally I'm just going to cut all this javascript that we have here and then I'll separate the concerns by adding it inside this place so let me pass that in here you realize that this is not using any jQuery of sort so I'll save this here I'll come back clean out this javascript we don't need it we just need only the canvas and then what I'm going to do is come back to my include scripts here I'll leave this in showing up and then I'll of course say this depends on the chat jas that we have there so let me save this and then come back to look at our html I'll reload we'll see that we have our title there we have our canvas which is 400 by 400 I'll look at our console and I'll realize that this is coming because it's html so I need to go back and see how to actually add our chat jas properly so we need to just get the minified version by getting this link so I'll save this come back reload this and you'll see that now we have this showing up it's really huge it has static data but we can make it even better or smaller in terms of view what I'm going to do is just use some css to bring it in two terms it's really unruly so what I'll do here is I'll add a style and inside my style I'm going to say the max width should be 500 pixels and then the max height as well should be 500 pixels I'll save this come back here and reload and you'll see that we have this little nice and neat graph right here so with this I'm able to make the data dynamic you'll see that we don't have any data showing up in here but what I'm going to do is I'm going to pass data into our script right here and we call that localizing data we'll be able to get the data that we've passed in there and then just throw it inside this data set that we have right here now let's look at what the documentation for what press says we're looking for wp localize script and you'll see that this requires to have a handle an object name and we can also pass in internationalization while we are doing that so the way we do this is that when we use the wp nq or the admin nq we are able to translate some particular things we first get that data from our php and then we can use the wp localize here to pass that data inside our java script so this is what I'm going to do so I'm going to go wp localize script and the script that I want to localize is actually this dssjs init and I want to pass in an object name and the object that I want to pass in right now let me call it techiedata so after getting our techiedata I'm going to come back right in this point and I will console log it I'll console.log our data so I'm going to pass that in so the first thing that I need to do is also get this techiedata from our php so we have been getting all our data coming from this api right here so what I'm going to do is just get our api call from this because we're going to need it up here save this just like we see here we have an array of data that's passing from here so we're going to come make our query from here and then what we are going to do is we're going to pass this data option as part of our techiedata so in here we shall have a URL that calls for the information that's being pulled in we'll get that data we'll pull it in using our wp remote get and that depends on whether we have the option or not then after getting that information we are going to pass it in here as an array of data so array and inside this array I'm going to have a string called data and on that I am going to pass what we have here as data options so I'll copy this and then pass data option right here of course I'll have to terminate this with a semicolon and then let's go back to our JavaScript we have techiedata save this come back here come back here let's reload this and let's inspect our item here and see what we have in our console and you'll see that we have all this information showing up right here our PHP is passing a data object which we need to convert into JSON so that we can use it in our JavaScript so as we are passing that data option I'm going to just JSON decode it so that we have another array a multi-dimensional array inside this data in our JavaScript we are just going to console.log that techiedata that we are passing we're going to log this object that we have here I'll reload and then you'll see we're going to have a data object which has 146 items and so we can be able to look through each one of these objects over and over again to see what we are going to get as information so if I come back here and let's say techiedata.data and come back reload you'll see that now our array is more on the front end so we can do it for each loop and we'll be able to see the different items that we have here so that means we can be able to pass all that information through our JavaScript so let me go back to our PHP and inside our PHP we can actually decide to loop through this data and make an object that actually makes sense for us right there so I'm going to cut this from here and I'll say this is going to be our data so we're going to JSON decode our data let me save this let me first comment this out here let's try to see what we get when we bad damp data I'll reload here and you see that we have the district code we have the name so we're going to get the district code and the district name for now for each one of those we shall just get 10 items and we'll be able to have those up there so we are going to make a new object we'll call this a multi object and it's going to equal to an array and what we're going to do is we're going to array push items to this multi object every time we do a for each loop so we're going to get our data first of all here and say for each loop data as data line just like we did in the previous section of our video we're going to say we are going to get our multi object and that's how we shall add all the different items so we're going to say get the data line and what we are looking for is the district code district code and we also need to get the district name and we are going to wrap this inside an array terminate this and we're going to say district we'll say district code so we'll wrap this item we'll put this in single codes and we'll get district name here copy this paste it here and what we want to do is array push all of that so we'll say multi item is equal to that array and then so for each one of those we're going to array push and the array push expects us to just add the multi object which we're going to push into and what we are going to push in at that time so copy this add a comma and save this here so let us vadam what we are pushing and see right here so I'll copy this paste this here I'll save this let's go back here and reload we have an error on line 78 that's because we left the semicolons here that we actually don't need we just need a comma right here and for wordpress coding standards a comma there a reload and you see that we have district a beam and then we have this right here now that's brilliant all we need to do is just say we're going to pass this multi object from here and we're going to pass it in as our data so I'll uncomment that out and remove this vadam that we are having let's go back and reload and look at our console and you'll see that in our console we have these different items and that is the district code and the district name so I can restrict those to 10 items I'll just add a count here and say count so we'll start our counter and say count is equal to zero and then the next thing we're going to do here is we're going to always make account and say count plus plus to increment it and say this is the first time we're going through that for each and we'll say if our account is less than let's say 11 if count is less than 11 then we shall make a loop of this otherwise we're going to return so I'll do this I'll push all this code in here so that we only get only 10 items so I'll save this and remember we are passing our multi object as data here I'll come back and reload here and you'll see that we're only getting 10 items in here as an object with the district code and district name so that means we can loop through each one of these objects and then say we're getting the district code or the district name so I'm going to come here and say the labels here we're going to start up with the variable that's label and inside that label we're going to get the take a press data first of all we'll say this is just an array and then we're going to do for a full loop so I'll say full loop all we want to do is say let index equal to zero and then we're going to say where index is equal to the array length and basically the array length what we want to do is copy this and place it here and then we shall change the index to increment every other time so after getting that for each loop we are actually just going to say let's get the label and we are going to push to the label what we're going to push here is actually the take a data and we're going to say for each one of those index we're going to get we just want to get the district name so I'm going to come here and say dot district underscore name so let's terminate this I don't need this let's see our label if we console log it as well so duplicate this and move it down let's see what we're going to have for our label so label I'll comment this out save our reload here we have a little error which I need to just correct and that's because I didn't close off this push I'll come back here reload and you're going to see we have an array of the different names showing up here and this is what we need in this case so I'm going to just get the label pass it in here as the labels and then we're going to do the same thing for the data so in that particular case we had the district code so let me duplicate this and we're going to call it code and in here we're going to just get the district code at this point so district code we need to change this label to code as well and then I'm going to clean this out and then we just need to pass to our data here we just want to pass the code and so let's go and see so I'll reload this and you're going to see that we have now new districts with a different code that's available right here giving us all the different markers that we need so using WP localize allows you to pass an object or string straight from your PHP so that you can have server side rendering and then just pass a ready object into your script into your javascript that you can manipulate on the client side and that will give you things that you're looking for so this is something that you can do in different javascript with different PHP and that will allow you to make excellent applications that are on point so if you want to find this code all this sample is going to be available inside the description below don't forget to like the video if you enjoyed it subscribe if you're new here and you think the content is worthwhile don't forget to share with your friends otherwise enjoy your coding