I need to fetch data from local file of csv format and display. How can i get it?
Using this code
const myData = require('./data.dat') seems not work for me
You can not just require a csv file.
When you use webpack as your build tool, you can use the csv loader.
This is the only solution that will work in your browser, as it is opened and interpreted during compiletime and linked statically with your code.
It will try to parse your csv as json and you use it like a json object.
https://github.com/theplatapi/csv-loader
When you create a node js app, you can load it during runtime with the node file api or use a specific csv library.
https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback
https://github.com/adaltas/node-csv
Related
what is the best practice from the following in using json data from data.json file in reactjs web application?:-
Storing json data file in the same file system and import it in react component.
run json file on local server and fetch it.
use backend server.
and which option will work fine after deploying the application? and why?
It really depends on the use case.
If the data.json is static, importing it will include the file in your bundle and will create a better user experience since you will not have to make an HTTP call and wait for its response.
fetching a file from your local server will give you a smaller bundle size (quicker initial load) and while you fetch the file (should be quicker than backend since it is local) you can show some loading animation.
If your data file is dynamic you may need to serve it from the backend.
If you are server-side-rendering your page, importing it will include the data in your HTML source which can be an SEO advantage.
For me, if it a small enough static file I would Import it (option 1)
I have a scenario where I want to create csv file and the same generated csv file I would like to pass It to backend call.
I can generate csv file using below plugin but would like to know how can I pass It to backend once file is generated?
https://www.npmjs.com/package/react-csv
Anyone please share the Idea on It?
I have a sample_data.json(this json file is located in my local HDD) file which I can read from my React JS project.
Now the problem is, if I change the data of the sample_data.json file, how can I fetch the updated data in my project?
I already use setInterval method to read the json file after with a 5secs interval. But it fails to read the modified json file.
this.timer = setInterval(()=> this.beginSampleData(), 5000);
If you import the JSON as a file in your React Project, it will not update until you rebuild the project (or have hot-reloader enabled - but not something you want on a production app). If you want to load the file on the fly, you need to create a nodejs server, create an API that reads the file (see more details on how here: Proper way to return JSON using node or Express) then from your react app fetch it from this endpoint instead of the file directly.
Just started with angular and I am debugging my angular app and would like to save a large json object. Is it possible to save this in chrome? Or how to save this with angular?
Extra info: I want to save the contents of $rootScope to a json file.
Not sure from your question where you want to save the file so I'll assume server side you could post the json to a rest service using $post (a get request will probably be too long) on the server that writes the file with the posted contents.
You should use the browser tools from your favorite browser. in your code write this code:
// ..
var json = JSON.stringify($rootScope);
console.log(json);
You will be able to copy the content from the console and you can save it into a new text file.
Simple question, is it possible to write json data (received from API) to a json file in my directory structure. The api returns a json string. Is there any method in angular that supports this or do I need to rely on jquery? Extra information on this topic is welcome.
You cannot access the user's filesystem from javascript, instead you should present the user with a save dialog (it's up to the user where to save the file). AngularJS doesn't support this out of the box, you could however save a file to the default download folder by converting the JSON to a base64 string and bind it to an a href.
<a href="data:application/octet-stream;charset=utf-16le;base64,ew0KICAgICJnbG9zc2FyeSI6IHsNCiAgICAgICAgInRpdGxlIjogImV4YW1wbGUgZ2xvc3Nhcnki
IA0KICAgIH0NCn0=">json file</a>
For more control to save files to the client, you could use FileSaver which has support for older browsers.