so I have created an electron App with the help of react.js.
The app should mainly display charts, for which I use chart.js. The data of the chart files need to be updated monthly, since I get new data every month from another department per Excel, which I quickly export to a JSON. Obviously I don't want to create a new production electron app every month. So is it possible to retrieve data from json files after production? I can't find anything on the web unfortunately.
How do I go about that, since I can't access JSON files outside of my src folder with react or can I?
thanks in advance!!
Electron is for creating desktop apps so you have full access to the file system.
To read a local file you can install and use Node fs. fs supports Promises, callbacks and synchronous methods.
Rather than hardcode the filepath, you probably want to do some friendly UI stuff like on first launch, ask the user to select the file they want to load and then store that path as a preference. Then on subsequent launches, test if the file exists and load it, otherwise alert the user to pick another file, etc.
let thePath = "/Users/Spring/Desktop/ticket.txt"
var fs = require('fs');
fs.readFile(thePath, 'utf8', function (err, data) {
if (err) return console.log(err);
// data is the contents of the text file we just read
});
Related
I have an Angular app where I am loading some static data from a file under assets.
urlDataFile = './assets/data.json';
data: any = null;
constructor(
private _http: HttpClient
) {
this.loadData().subscribe((res) => {
this.data = res;
});
}
private loadData() {
return this._http.get(this.urlDataFile);
}
This works absolutely fine for me for truly static data.
When I build my app for distribution, the data gets packaged into the app.
However, once deployed, I want to be able to publish an updated data file - just (manually) updating a single file into the deployment location.
In an ideal world, I would like to develop with a dummy or sample data file (to be held in source control etc.), to exclude that file from deployment, and once deployed, to push a new data file into the deployed app.
What is the standard convention for accomplishing this?
What you have there should work just fine?
There's two ways of doing JSON stuff; one is as you're doing and dynamically request the file, the other is to literally import dataJson from './assets/data.json' in your file directly.
The second option, I was surprised to find out, actually gets compiled into your code so that the json values are literally part of your, e.g. main.js, app files.
So, yours is good for not being a part of your app, it will request that file on every app load (or whenever you tell it to).
Means it will load your local debug file because that's what it's got, and then the prod file when deployed; it's just requesting a file, after all.
What I foresee you needing to contend with is two things:
Live updates
Unless your app keeps requesting the file periodically, it won't magically get new data from any new file that you push. Until/unless someone F5's or freshly browses to the site, you otherwise won't get that new data.
Caching
Even if you occasionally check that file for new data, you need to handle the fact browsers try to be nice and cache files for you to make things quicker. I guess this would be handled with various cache headers and things that I know exist but have never had to touch in detail myself.
Otherwise, the browser will just return the old, cached data.json instead of actually going and retrieving the new one.
After that, though, I can't see anything wrong with doing what you're doing.
Slap your file request in an interval and put no-cache headers on the file itself and... good enough, probably?
You are already following the right convention, which is to call the data with the HTTP client, not importing the file.
Now you can just gitignore the file, and replace it in a deployment step or whatever suits you.
Just watch for caching. You might want to add a dummy query string with some value based on a time or something to ensure the server sends a new file, based on how often you might update this file.
Im currently working on a new design for a mobile app (only frontend). In the project I need to use states to change the css of a button. If the button has changed, next time the app is refreshed the state should be as you left it.
That is why I have a locally stored JSON file that is structured the same as how the apps current database is. Reading it is no issue, but I can't get the writing to work.
How I read the JSON:
const jsonData = require('../data.json')
function GetBaseState(id){
console.log(jsonData.bases[id].state)
}
How would I go about changing that state in the JSON file?
In order to both of reading and writing Json file , you are able to use react-native-fs. For example by readFile method you can read json file and by writeFile method writing your json file in local storage.
react-native-fs have good documents that you are able to reading that for more information and usage.
I'm currently thinking of a concept for a react-native app where people add events over a period of time like a diary/log. These events need to be exported and for security and privacy reasons I don't want to use a database. I've read you can use JSON files as a storage method, too.
How can I store data from the app to a JSON file and load the data from the JSON file back in the app? Don't need any code, helpful articles or webpages are appreciated
Assuming that you already have all the app data into a json, its rather simple.
Decide where to store the appdata.json, lets call it APP_DATA_PATH
Find a library to read/write files (I've only used expo-file-system)
On app boot, check if APP_DATA_PATH exists, if it does read the file and load into app, if not assume its a new user
Whenever app data changes, write the changes to APP_DATA_PATH
I'm developing an Electron app that is running an instance React VR. The app enables a user to add and save content to a react-vr project by reading and writing the state from/to a JSON file. During development, this JSON file has been stored in the root directory. However, if a user is to download and use the app on their computer, the JSON file needs to be moved outside the app package contents folder.
I have tried using app.getpath('userdata') which returns /Users/'username'/Library/Application Support/'app_name', and I can move the JSON state file there successfully upon running the app. However, I don't know how to have react-vr access this file, especially since there is no access to the computer's file system. However, all I really need is the user's system username to include in the 'userdata' file path.
What's the best way to go about retrieving the username from within react-vr? Would there be a better way to persist user data instead of a using a JSON file to keep track of the state? Would it be worth considering using AsyncStorage in conjunction with a database? Many thanks.
i am building an extension to parse json using vs code extension.
so my need is ,it should be able able to load .json file from a particular folder and iterate through content of the file.
Then it should allow user to select few keys from it make a new json file out of this and save it in any folder.
But i am not able to find any way to read and write files in "vs code extension".Could someone please help me.
If you want to read the current edit state of a file you can use the following API workspace function:
vscode.workspace.openTextDocument(uri).then((document) => {
let text = document.getText();
});
This will show you the current state of the file including unpersisted changes. document is of type TextDocument and has isDirty set to true if it has pending changes.
Since the extension runs in nodejs, you should be able to use any nodejs module built-in or installed by npm in the usual way.
For your purpose you will be OK with the built-in fs module: https://nodejs.org/dist/latest-v6.x/docs/api/fs.html
In your extension you will need to import the required module, so your code file should contain this:
let fs = require("fs");
and then use the methods in the usual way, eg. fs.fileReadSync( filename, encoding ) ...
Please not that there is one exception. If you install a nodejs module containing compiled, binary code, it will not run in the extension and instead you will see an error message saying something like %1 is not a valid Win32 application. Pure javascript modules are OK, though.
VSCode extensions are running in node.js. Therefore you can use any available node.js package/module within your extension. For instance, check out this question for reading JSON.
For JSON, you just need to require or import the JSON file, such as:
const jsonObject = require('./myJSONfile.json');
// do something
For JSON with comments, you can use node-jsonc-parser.
After the manipulation, you could use the fs module of nodej.js to write to the disk.