Context
A feature that I would like to implement is to add a local(client side) database as offline feature for my cordova app using basic html, css, and js. It would be a fallback in case the internet connection is cut off. What I thought was that it would store the request url and request data inside a local JSON file and would have an option later on to be able to resend those failed request if the internet connection is restored.
Question
Is there a method to manipulate (add/create, edit/update, and delete) a JSON file stored inside a client app using pure JS?
What I've done so far is import and read a JSON file inside my app folder using the following code:
fetch("./database.json")
.then((response) => {
return response.json();
})
.then((data) => console.log(data));
(if there's a better way to do it, feel free to give a feedback in the comments)
That works fine and all, but I can't find any method on how to add/edit/delete an object and save the changes to that same JSON file.
According to this post which is half a decade ago, it is not possible without doing it in the backend.
Related
I am developing an Android app, I have a large JSON string around 5 MB in the Java native code. I need to send this string from Java code to JavaScript (JS files are in assets folder). When I run the application, it hangs.
public String readFileDataofIamge()
{
StringBuilder text = new StringBuilder();
String FILE_NAME = "ImageDataFile.txt";
try {
BufferedReader reader = new BufferedReader(new InputStreamReader(openFileInput(FILE_NAME)));
while ((line=reader.readLine())!=null) {
text.append(line.toString());}
reader.close();
}
catch (Exception e) {
}
return text.toString();
}
#JavascriptInterface
public String readImageData()
{
return readFileDataofIamge();
}
JS Code:
function getDatafromFile() {
var imageData=Android.readImageData();
}
If I return some small string value like hello world, I get the value in JavaScript code.
So is this possible to send this large data from native code to JavaScript code? If not possible is there any other approach to send large data from native code to JS Code?
Condition given: There is no internet connection, so I cannot make any HTTP or network call.
============================================================================
Application overview:
I have an Android app, in which I'm using WebView. all web related files (js and HTML) are inside the assets folder. On first launch I need to get all the data from the server. (I have internet connection at the very first time of app launch) Data is very large, it's around 5 MB, but it may very up to 50 MB. I need to store this data somewhere. so that If I relaunch the app anytime without the internet connection, the app should have this data and it should work in offline mode.
So for this requirement, I have tried to write this data (around 20 MB) into internal storage file and trying to read this file and sending data to JavaScript code. But it's not working.
I have thought to use SQLite DB instead of storing in File, But I think again there will be the same problem while sending data from native code to JS code.
So could you guys please suggest some better approach.
Your problem won't get solved if you store the data in a database unless you won't need the whole file at once.
If the Website uses REST or similar and you have access to the code you could hook the requests and send them over to the Java / Kotlin part of your App. Otherwise you could use WebViews interceptRequest.
Once you are able to get the requests you can return the required data from your database. Imagine it like representing the backend for the website.
Example:
Website requires all users via GET users/all. You intercept this request via a hook which calls a Java method and then returns the result OR via interceptRequest. Either way you will have your local database on which you run a query like (pseudocode): Select * from USER. Then return the result.
Since you are dealing with JSON you could use a NOSQL database like CouchbaseLite which directly stores the JSON. Disadvantage: if you need to modify the data you will have to convert it to a POJO and back to JSON once you return it / store it again. Or use a SQLite database. For this you would have to convert the JSON you download to POJOs and then store them.
It would be great if the backend (from where you get your JSON) allows you to get different model types and not everything at once (otherwise you might run into memory issues). You could use Retrofit for networking and Moshi or Gson for your conversion to POJOs.
If there are no REST requests or similar and you need the whole file at once. Honestly I'd say there is no way of handling this in pleasent way.
I want to push an data to array in external local JSON file using jQuery.
So any ideas?
I have tried this:
$.getJSON('test.json', function(data) {
data.push('Something');
});
And it wont be pushed into local JSON file
You can do this in JavaScript with node.js (or a multitude of other languages/platforms) but not with a browser & jQuery.
Here's how to read and write a json file in node.js
On the other hand, users could upload a JSON file to your server, where you modify the structure and send them a modified JSON file back as a download.
Is not possible to write files using Javascript (can cause security problems through xss, csrf ..)
No, JavaScript doesn't have access to writing files as this would be a huge
security risk to say the least. If you wanted to get/store information server-
side, though, you can certainly make an Ajax call to a PHP/ASP/Python/etc.
script that can then get/store the data in the server. If you meant store data
on the client machine, this is impossible with JavaScript alone. I suspect
Flash/Java may be able to, but I am not sure.
If you are only trying to store a small amount of information for an
unreliable
period of time regarding a specific user, I think you want cookies. I am not
sure from your question what you are trying to accomplish, though.
Read/write to file using jQuery
You cannot access the files in a local client's machine. May be for development setup you can do it. But before you need to restart the browser with file-access flag set.
You can see my answer here that describes the opening browser setup with the flag set.
Then, you can use the following code to read the data.
var data = [];
var url = "/Users/Vignesh/Desktop/test.json";
var req = new XMLHttpRequest();
req.open("GET",url,true);
req.onreadystatechange=function(){
if(req.readyState === 4)
{
data = JSON.parse(req.responseText);
}
};
req.send();
To write into the file you may look into this. (Not sure it is working or not)
I'm trying to build an Electron-based app, mostly using code from my existing web app. The electron version connects to my server and often relies on that online content. I am using Ajax requests (using Jquery) handle things like the user logging on, and a php session is created, which is required to access most of the content.
I am now trying to get Javascript to automatically download a .zip file and save it to a location, without the user doing anything. I failed to do this using an Ajax request, so have tried to use the Node.js 'request' module. Then however, it wouldn't download the file because it was not authorised (because the request creates a new session, different to the existing, logged-in one).
How can I get something like the following to work?
const fs = require("fs");
...
$.ajax({
url: "my-server/file.zip",
success: function (data) {
fs.writeFile("local-file.zip", data);
}
});
Note - I think it failed due to some issue with the way the downloaded data is encoded, but don't understand exactly what the problem was.
Alternatively, is it possible to use the existing ajax session in the request module, and download it that way?
I have a JavaScript application that uses REST API server as a data provider.
There is one method on API that takes GET request and returns raw response that contains email (as far as I can see there is some kind of .eml content).
I use a simple xmlhttprequest.
The question is: how could I take a response (the file content) and delegate it ti browser so the browser can begin a downloading process ?
Is it possible to do at all with GET method ?
Javascript does not support downloading and saving arbitrary files on a user's computer due to obvious security concerns.
There are, however, a few ways to indirectly trigger the download using javascript. One of those ways would be using an invisible iframe and setting the source to the path towards the file.
You might be waiting for browsers to implement window.saveAs, see also the question Using HTML5/Javascript to generate and save a file
There are several snipets you could try, for instance https://github.com/eligrey/FileSaver.js or https://gist.github.com/MrSwitch/3552985
Depending on how you have your client running you could use local storage.
to store the item
localStorage.setItem('NAME', DATA);
and to retrieve
localStorage.getItem('NAME');
and to delete
localStorage.removeItem('NAME');
and then set up a callback or promise to render into the html. If you use axios you can set this up with a promise https://github.com/mzabriskie/axios
I have an MVC.NET app which using Knockout.js (+ knockout.mapping) to deal with some cascading dropdowns. The data for these comes from a WebAPI call to an external service. As it happens this service requires an authentication token which expires after 2 hours, so I have the MVC app put the data from the service in a System.Web.Caching.Cache and return it from there unless the token has expired where it will grab it again from the service.
This is working fine.
However when I need to get this to the View, I am currently using the following method, which is to have a property of the ViewModel that I assign the service/Cache data to and then do this in the view:
var model = new ViewModel(#Html.Raw(Json.Encode(Model.ReferenceData)))
ko.applyBindings(model);
where Model.ReferenceData is the data from the service.
again this is working fine, but... the thing is with this, that the page then has all that Json data dumped in it on each request.
I would like to use an external JS file for the ReferenceData as then at least it can be cached by the browser and lessen the weight of the page on future requests.
However, I imagine that the overhead of generating a JS file is not that small, along with – what I really need is it to generate a link to that file that changes in much the same way that the built in MVC bundling of js files works – generating a link with a querystring.
My question is: is there an easy way of doing this?
For sure I can, when the cache is filled that first time, generate a js file and reference that from the View, but as I say getting that to change its link each time it is refreshed – or at least working out whether the data in it has changed and updating it only then is where the problem lies.
Any insight to this would be of great help
Thanks
Nat
Version the JS file (you can keep a GUID in the file it-self).
In Application_Start() get this version ID to a static variable.
In your controller pass this static variable data to ViewBag.
Ref your script with this ID
When you regenerate the file, update the version in file as well as your static variable. Next request from the client get the new version with new key.
Now if you want to update clients on the new version you have to use bi-directional protocol like web sockets or long-polling.