JavaScript Tip: Loading a Local JSON File without Fetch

loading a local json file is frequently done with fetch but that is not the only way to accomplish this in this tutorial we are going to look at a method for loading a local json file without using the fetch api welcome to another tutorial from all things javascript as always make sure to click that bell button and subscribe and remember to check out the discount links to all my courses in the description i really appreciate the support and if you'd like there are other ways to support the channel which are linked to in the description as well if you provide support through patreon you get access to all the code files and for a list of all the tutorials i've done which are over 230 you can go to the website as well now for this tutorial i need to give credit to jay tillman one of our patreon members not only did he suggest the topic but he also provided this solution we're going to look at the solution is similar to a solution used with node and involves a technique used for loading modules in javascript i've done a previous tutorial on using fetch to load a json file and we'll link to that tutorial in the description for those that are interested now there is nothing wrong with using fetch to load a json file in fact it works great but like all things in javascript there's usually more than one way to do things this technique doesn't require using promises and there's no need to parse the data once loaded and so it might be preferable for some people so here's the scenario we have a local json file that we need to load as a part of a project how can we do that without using fetch well we can use the import statement met for modules we just have to make a minor adjustment let's take a look at it now in my tutorials i normally use sublime text since that is how i started all these tutorials several years ago but in this one i'm going to use visual studio code as shown here this is the editor i use for the majority of my work now in this case i'm going to use it because it has a nice little extension called live server let me just show that to you really quick i've got it installed right there so nice little extension called live server when this extension is used you can serve up your pages with a local server since loading a json file requires a local server or placing the files on a live server to work this is what i'm going to use to show the results so first off i have this html file present.html this has the same content is what i'm showing here all right exact same content that's the same html file then i have a javascript file right now there's nothing in it and here's the json file i'm going to load so very simple just has a couple of names in an array two objects with names in an array that's what we're going to load just to show that we're able to do that so let's take a look at the solution now the first thing we need to do is we need to make a change to the script tag so currently i have a script two script tag here's one for start.js this has some code that does some things for when i'm presenting these files if i want to go to another html page or something like that i have some code for managing all of that so it's not really the code we use for the tutorial however the app.js file is always the code that i use for the tutorial when i'm doing these and so that's why i have both of these attached now we need to make a change to this one here because this is where we're going to do the loading of the json file that's where we're going to put the code to the loading we're going to use the import statement which is intended for modules that's why it was created for modules and so in order to make that workforce we have to set the script type here to module like that and this will allow us to use that import all right so i've made that change first in the html file now if i come over to app.js here is where i can use the import statement so it looks like this users is where i'm going to place whatever is imported okay and now i indicate what i'm importing now the json file is contained within this json folder right here and that json folder is is in the exact same location as the present.html and app.js file so i will start from the current location dot and then i'm going to go down to the json folder and grab sample json like that so that's what i'm going to load all right now the trick is this is normally what you would enter for an import statement if you're loading a module but the trick is this is a json file so we have to use an assert to indicate such and so we do assert and inside curly braces here type and [Music] string json like that so this is what's required in order to load a json file after you've set the script tag to type module now just to show that we're loading everything i'm just going to do a console log statement here and log users because basically what's inside of this is going to be placed in users and that's how we would access it that's how we'd continue to work with that json file if we needed to i'm going to go ahead and save that now we need as i mentioned we need to serve this up on a local server in order to see it working so the way i do that with the live server extension in visual studio code is i simply click go live and that's going to launch a new page for me and as you can see it's the page we were looking at it's the same page we were looking at and then if i go to the console i should see the array and it's showing the data from the json file so that went ahead and it loaded correctly now let me just show you what would happen if we left this part off so going to save that we get this message here fair the load module script expected a javascript module script but the server responded with a mime type of json here so it knows that we're loading a file different from what it thinks we should be loading because traditionally when we're loading modules we load javascript files and so that is the reason for that assert in order to indicate that it is a json file that we're going to be loading so once that's done then it loads correctly now really quick let me just show you one more thing i have this same file exact same file here pulled up just as a local file not through a local server i have that over here that's what we're looking at initially so it's not through a local server this is the error you would get if you weren't doing it through a local server access to script gives all this stuff from original has been blocked by course policy cross origin request this all sounds very confusing but basically the reason this era message pops up is because we are not loading this through a local server and the thing we're trying to do on that javascript file requires this to be on a server all right so that's why we're getting that so that is our solution two changes in the html file and then we use the import statement in the javascript file all right please hit that like button and subscribe and remember the discount links to all my courses in the description section click that bell button to be notified about new releases i release new tutorials as often as i can and once again thanks for watching

Channel: All Things JavaScript, LLC

Views: 37,544

Keywords: JavaScript, Learning, Tutorial, All Things JavaScript, Getting Started, instruction, training, JavaScript Tutorial, Understanding JavaScript, JSON, module

Id: Z92PqSyUBSI

Length: 9min 5sec (545 seconds)

Published: Wed Jun 15 2022