Fetch and Display Advanced JSON Data in Chart JS

in this video we're going to focus on how to use the fetch api to extract data so basically we have here a financial report with a lot of data here with different layers of data and it's a good exercise here to explore how to do this you can see here we have a chart but if you click on fetch now it will grab all these values here which are directly you can see everything is changing all the values the title etc which is directly matched with here you can see your financial report our company name charge as corp and then all of these data here that we have also in here so let's start to explore how to do this right now so we'll be focusing here on the fetch and display advanced json data in chartiers so let me show you first for the structure what we have here and if you would look we can see here as well if i click on this tab here we are going to the finance.json file which is basically all the json code we're going to use or click here you can see it as well on the browser just a quick note this is a local host so you need to have a local host a web server or you're on your hosting to do this else you cannot use fetch api to connect the file very important here so you can see here this is the reason i'm going deeper into this topic here is because this finance.json file has multiple layers deep you can see here this is the first layer second layer and then we have the third layer with all these different data and what i want to do now is to focus on this how we can extract certain values from this and put it in our chart all right to do this we go here to chart jstree.com getting started let's go to this specific link here and then we're going to copy this code here once we copy this chunk of code we will paste this in here so we're going here paste it in here nicely and then what i will do is just for me cut out the title put in here the title save that all right ignore that one and refresh all right so now we have our bar chart here and what we want to do now is start drawing or at least fetching the data we have in here and put it in here i'm going to explore how to do it with these more advanced items your layers deep and how you can extract certain other items as well so to do this what we need to do here is we're going down here at the very bottom or not at the bottom but just here and then at the top of the script so this is the starting point of the javascript we need to use the fetch block so we're going to put a fetch block here and this is extremely important to remember fetch must start at the very top of the javascript or else it will not work that is not so that's a requirement in the javascript structure so what we're going to do here now is we're going to write our fetch code so the first thing that we're going to do here we're going to say async for asynchronize let me say here the function so this will already indicate that this is a fetch function and then we can give it a function name could be anything let's say fetch data once we fetch the data what we're going to do here is we're going to grab the url where the json file is located in this case json file is located on the same hosting as where the file or basic where the uh html file is located so what i'm going to do is i'm going to just grab this file and if you don't have this file i will put in a copy of this in the comment section so you can immediately follow along as well so what we're going to do in here we're going to say here the following we're going to give it a constant and then we say this concept will be the url of the file i'll just give it a name url single quotation and then we just paste in the url of the json file which is finance.json it has the it requires this specific ending here so once we did this the next thing what we need to do is we need to create a response basically our goals now we have this we are saying we have a fetch or a synchronized function here we want to fetch data so we want to send this command with where we're going to extract the data which is this specific url so what we're going to say here is we're going to create a constant and this constant view will call response we can call anything we want a response is fine quite practical in our case so we say here we respond and then we say away meaning we're waiting for a uh fetch we're going to fetch something and we are waiting for a response that's basically what we're doing here and the fetch will be from a specific item basically the url or where are we going to fetch data and if you're wondering what does fetch mean fetch is basically when you throw a bone and a dog is going to grab the bone it's running through back that's what we call fetching so basically you throw something out and the dog come back with that bone basically that's what fetch is so you throw it out you throw out a specific url and it will fetch you or you will grab the data that you want that's fetch all right so i guess a proper naming in javascript as well so once we have this what we need to do here is then wait for response or not even waiting for a response we need to wait for the desired response so basically we wait until the request has been completed so once the request has been completed what we can do here the following is to get the response back so we can say here a constant and we can say here data well we can say your data points since these are all data points equals a weight response dot json meaning we are expecting json data but we make sure that this json data is also converted into javascript readable structure so this basically here we're parsing the json immediately so javascript can read it and parsing means readable javascript or make something readable for a specific language in this case javascript all right so now we have this we can check if we get a proper response that is what we desire by checking the uh what we can do here console.log by just checking what the data points constant gives us let's copy this put it in here and then if we save this now you can clear a semicolon as well we can save this and we we go back here and refresh open up our developer tab you can see here now if we get a proper fetch well of course i guess there's still nothing being done and the reason why is it doesn't indicate yet we need to basically grab this function to do something so what we have to do here is just maybe just to activate it we're going to put in here button in this button we can say you're on click equals the fetch data function so we want to trigger this say fetch now save this refresh click on this and now you can see here we're going to fetch it immediately and instantly it grabs your everything and it grabs you in nice json data or sorry from json it parses nicely into javascript readable data and this is exactly what we want because you can see here we get these multi layers of data here and this is quite nice so basically we have this now but we're not done here once we did this what we need to do is we need to return the data points and the reason why i do return here is because this just fetches the data and then we have this console log that just reads it and the returning will basically save or store that data if you don't do this it will not store anything all right this is extremely important it does it won't do anything here visually but and in the back end or basically in the console log or in behind the scenes it remembers the data and this is essential because later on we're going to grab this data all right so now what we're going to do is basically how can we start to use this data and convert all of this here into whatever we want well in this case we want to have certain values here we want to grab all these items here we have this we can just convert anything here the moment click on fetch it should convert it all all right so let's do this right now so what we say is the following we're going to grab this function here and this function will now do something so we say this function is a dot then then data point so we're going to grab all these data points we have a fat arrow and in here we're going to start doing our items basically what we want to do is here really extract the specific items that we need and what are those so we can say here constant in this case we would just say we'll grab the month first so we have here you can see here the weekdays and let's convert them to the month and if we look here we can see here it goes in here from financials which is zero this means an array and then you have here the date that is a specific month we can read it here as well we're going to grab the dates here but we have to look through this every single one of them and push them into an array or basically it is an array but we have to loop them through in a nice array to easily extract these all right that's what we're going to do here we can say one constant month equals and then we say all right where is this exactly located if we look at it we have the data points so we grab the data point and then where we have to put in a dot then we can see here where is it located well we want to get the array we can get this year which we can get but we want to get specifically first the financial report because in here this is an array as well and then not only do we want to be in the financial report we need to be in the financials here which is another layer d and then we go to the date and the date here which is maybe not the right name for it should be month but the date here well uh that's the one we need to extract or specifically here the value of date which is the month of this all right so that's what we're going to do right now so we're going to break it down go here financial report the data points dot financial report dot we go into financials dot and then here in the financials we don't want to go deeper specifically here that's not needed but we will do here is we will loop it through into an array so we say a map which is a function and this function can loop through the entire array and then we can pinpoint a specific value that you want in this case we want to pinpoint this one here however with this structure we could also grab any other value so we don't have to duplicate this code multiple times or basically here we don't have to go very layer many layers deep just use this structure here because we do have to duplicate it here for the fetching with this however it doesn't matter we're going to grab down the specific item so we say here the map this function will grab the following item what are we going to grab here all right pay attention here because i have here the parentheses and here we're going to do curly braces all right so don't get confused here maybe i will just break this down in here all right so you can see it nicely so this is very clear here so in this function we have a parameter and the parameter is basically index number which is 1 0 1 etc etc so we call this here the element or the index number we just say index so we will loop through this every one of them in the index and then what we will do here is the following we're going to say here return what are we going to return now we're going to return one specific item here which is the uh what was that the date item here so we say return index dot date once we have this semicolon here you can start using this because basically now we have this we save this now and we could even here do a console ah we have to do it outside of this item here and the reason why this is basically our loop the map page looks through this so we go outside the loop here console.log and then we can grab here month then we can see what will be the result here semicolon here and if i save this now and go back here and refresh uh all right so we have some error here map pop undefined all right we have here the data points financial report dot financials map so let's let's quickly check what's going on here all right so i quickly checked and i realized of course this is very important this is why we're going layers deep here but let me explain here what is going on so we had this part here so we're going to look at this json file here and then here if you look at this we have the financial report and then you have a bracket here indicating very important indicating that this is an array so if this is an array it goes down here and then afterwards here is another array so what we need to do here this is the first chunk of code in this array so this is a index number we need to indicate an index number in here meaning here in the financial report your index number is zero all right so if you save this now go back here there we are so now it works nicely and you can see our array is being shown nicely here as well so what we're going to do here basically is now to echo out this response so if i do this if i click on that you can see here this works all right we grab all of this we have all the values here all right this is fine but what i want to do now is to activate the function here so what we need to do here now we have this fetch data this data over here let's first use just temporary to show you the result what we're going to do here now is create a function let's say update chart and then here the update chart is basically our function here that is the overall it nested we nest the entire function in here all right and then what we're going to do here is basically update a certain item so what we want to do here is now we will say the following because we need to update this specific label here the label so we say here we're going to grab here my chart and then we say here dot config and if you're wondering how do we get this well basically we're going to grab it from here we say here for my chart config and then we go to data and how we go from config from my chart because of this one here let me go to data and from data we're going here to the specific item which is the labels all right so my chart data dot labels equals whatever we will have in here not this case it's the month so we're going to put in here the month and once we did this semicolon here let me say here my chart dot update all right so if i save this now and refresh you can see here now if you fetch now fetch data is not defined oh of course it this is of course not defined because we have now another function nested within here so we save this go back here press on this you can see here now it changes nicely all right so this is the first one so let's go and try to grab some other items as well so we have this one here what we could do as well is we could even go one layer uh lesser or undeep because of this you could go one layer um by removing this and then here we have to go one deeper but that's all right for now so but we could do the following as well we could have uh some other options as well here what we can do here is let's grab the specific data so we're going to do another item here so what we can do is basically duplicate this chunk of code here and do another one as well so we have here related to the month and let's say we want to grab something else so what would we like to grab we can grab here a specific item here let's say we will grab now the revenue so what we have to do here is the following just copy this because basically here the fetch that this loop here is consistently working so we can just duplicate this and put it in here so we say in here and then i just have this jumped in here or this was properly indented now we can do here is the following we can say here uh instead of cost we can do here maybe what was the term let's grab the revenue we're going to grab the revenue so we say here const revenue equals and then here index. we can do here revenue and once we did that we can say here instead of a month or we can just duplicate this and we will say now we will result the revenue if i refresh again fetch now you will see now we get the revenue value of course the revenue has not been assigned yet in here so let's do this right now so once we have this one what we can do here as well we can update again our chart what we want to update now is are not our data labels now we want to update as well the data itself which is in the data set so data sets remember this is an array here same as well we say 0 and then dot data equals revenue so if i save that one refresh we do that there you are you can see now it changed as well so next thing we could do would be to maybe change this weekly sales as well we can change that but the weekly sales to change you'll have a slight different item because right now we have this here and this is fine but we went very we went basically deeper in here just to grab only this specific part so if we have to jump up let's say we want to get the company name or the stock name then what we need to do is we really need to go one layer up because here you can see this part here has been too deep or we have to make another fetch data i don't want to do that so what i'm going to do is we're going to go one level up so we're going to cut this out we're going to cut that one out and then what we're going to do here we have this index date but then the index date must go from one up as well so what we need to do is here we go in here and then what we need to do here is we will start from basically from this so we go to financials first and then date so we say index dot financials and then we have this one here so if we do this we save that and then we refresh and let's look all right so we've got now a tiny error so uh and the reason why here is it something doesn't work don't worry about we're going to solve this right now all right so i just figured out what i did wrong of course this is absolutely i'm not paying attention so what we need to do of course we don't have to to adjust anything in here that doesn't make any sense at all so i'm going to put this back and the reason why we don't need to do this is we can just copy the code and we adjust this i am completely not paying attention on that one but then once we have this you will see now this will work all right so let's undo this all so to make sure that this everything is working nicely so save that let me refresh we have all of this all right so this works all nicely so what we wanted to grab is of course the company name if you pay attention where it's located it's located in the financial report so if you look at our code here we already have our basic structure all we need to do now just to copy this let's put it in here we can call this our company name so let's say this one we're going to grab this company name here put it in here and then here we can remove this i'm going to remove this one as well of course because then we can just pinpoint on which item you want and then we say index dot company name once you do this you can just say here company name and you will see now this one will work nicely we're going to hide this console here for the revenue go back here refresh then we click on this and then you can see here we get now the company name which is chart.js corporation beautiful and this is a index of zero so that means this first array value all right so what we're going to do here then is now to show this specific value so how do we show this well basically we're going here let's see where is the value here in the labels of weekly sales and basically we're going to say here this is pay attention this is labels with an s the other one's label all right so we're going to grab this put this in here and then we say here let's look for the official location we're going to data sets zero dot lay ball without the s and then we say equals company name so once we get this let's see if this works because this is considered as an array so we have to see if this one will work like that or else we need to adjust that one as well refresh the key on fetch that you can see here charges corporation beautiful and if this is an array we could also put in here a force value of the first value in this specific array and i'm sure we can go another level deeper the event is the one we should go where we can duplicate this image if we imagine you have not only one company but multiple but i will cover it in another video so this is basically a level deeper with the uh json parts and if you have any questions regarding this put them in the comment section below and if you enjoyed this video maybe you also tend to use different files like this csv file uh where you work with with charges and in that case i would highly recommend you check out this specific video where we explore how to update a chart dynamically based on csv files in charges the link will pop up somewhere on the screen already and this one is a different way of doing it instead of using a json file

Channel: Chart JS

Views: 50,340

Keywords: fetch and display advanced json data in chart js, fetch dynamically update json data in chartjs, chart.js using json data, fetch json file with chart.js, parsing json data into chart.js, how to update data from fetch into chart.js, javascript charts from json data api and fetch, chartjs, chart.js, chart js tutorial, chartjs 3, chart js 3, chart.js 3, chartjs 3.5.1, chart js 3.5.1, chart.js 3.5.1

Id: mw5i_QGDomw

Length: 23min 26sec (1406 seconds)

Published: Mon Sep 20 2021