I am using AngularJS and I have to import/export an array.

I could export the array object converting it into JSON object then using FileSave.js library to save the file locally.

Now I can't find any information about how to import this json file from my PC to my application, then converting it into an object to display the array.

Thanks

I am using AngularJS and I have to import/export an array.

I could export the array object converting it into JSON object then using FileSave.js library to save the file locally.

Now I can't find any information about how to import this json file from my PC to my application, then converting it into an object to display the array.

Thanks

• javascript
• json
• angularjs
• import

• Did u tried $resource, $http???? – Bharath S Commented Jul 25, 2015 at 4:06

2 Answers 2

Client-side javscript is unable to access the local file system by design for security reasons. As far as I am aware, there are 4 possible solutions for you. I've listed them below in order of ease.

1) Create a variable in your program, and simply copy paste the contents of your json file into your js file as the value. This will take two seconds, but it can be really messy if your JSON file is large or if you need to use multiple json files.var localJSONFile = [literally copy-pasted JSON text]

2) Check out Brackets by Adobe. I just did some quick googling and found this page that shows how to access local files. Open that and do a ctrl+f > 'local' and you'll find it. This is my remended approach, as it's fast and easy. You will have to switch your IDE, which if you are just starting out, then most IDEs (Brackets, Sublime, VSCode, Atom) will feel the same anyways.

3) Create a basic angular service to inject into your program with the sole purpose of storing copy-pasted JSON files as variables. This is ultimately the same as 1), but will help you make the files you are working in less cluttered and easier to manage. This is probably the best option if you don't want to switch IDEs and will have a couple JSON files you are working with.

4) Get a local server going. There are tons of different options. When I was in your position I went the node.js route. There is definitely a learning curve involved, as there is with learning to set up any server, but at least with node, you are still using javascript so you won't have to learn a new language. This is the remended approach if you know you will need to have lots of different data files flowing back and forth between the project you are working on. If that is the case, you will ideally have a back-end developer joining you soon. If not, you can set up a server quickly by downloading node.js and npm (es with it) and using npm from your mand prompt to install something called express, and then express-generator. With express generator you can run an init mand from your mand line and it will build an entire fully functioning web server for you, including local folder structure, which you can instantiate with a quick mand from your mand prompt. Then you would just go to the file it provides for your routes and adjust it. Node.js CAN read your local file system, so you could set up a quick route that when hit, reads the file from your file system and sends it to the requester. That would let you move forward immediately. If you need to add a database later on, you will need to install a database locally, get the plugins from npm for that database (there are tons, so no worries there), and then update your route to read from the database instead.

This seems too easy, so forgive me if I'm oversimplifying:

$http.get('/myJsonFile.json').
  success(function(data, status, headers, config) {
    $scope.myJsonData = data;
  });

Or, if your response headers aren't set up to serve application/json:

$http.get('/myJsonFile.json').
  success(function(data, status, headers, config) {
    $scope.myJsonData = JSON.parse(data);
  });