0

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

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

2 Answers 2

4

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 recommended 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 recommended 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 (comes with it) and using npm from your command prompt to install something called express, and then express-generator. With express generator you can run an init command from your command line and it will build an entire fully functioning web server for you, including local folder structure, which you can instantiate with a quick command from your command 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.

Sign up to request clarification or add additional context in comments.

10 Comments

this reminds me of the whole "make a mountain out of a molehill" thing
Really? Cuz when I first faced this problem a few months back, this is exactly what I found and was repeatedly told by more experienced developers.
I agree that you can't access the JSON file from a local set up - but "go learn Node" is a bit extreme for advice to a simple question, don't you think?
Though again, if there is an easier solution than the two I offered, I would also be really appreciative to learn about it!
Now that's an answer! +1 and +1
|
0

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);
  });

2 Comments

I think that doesn't solve my problem because I want to import the file from my PC and don't from a service.
So, you can copy/paste the json string into a js file that you include in your application. You just create a variable and set it to the json string: var myData = { "prop1": "val1", "prop2": "val2" }; -- be sure that there are no quotes surrounding the entire object.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.