I want to make a local HTML application read and update a JSON file and use its content to display HTML content. Alas, I'm stuck at the very first step, as I can't seem to setup any sort of test file that simply notices and reads a JSON file. From what I see online, I need to use other libraries. I attempted to use require.js but I can't make it work and the documentation doesn't help me.
I imported the require.js with a tag and attempt to launch something out of what I got from the documentation, but there's nothing to do. It doesn't look like it's willing to take .json files.
requirejs([
'example'
], function(example) {
const config = require('./config.json')
});
My issue is to get the program to read the file. From there I believe I can make the display of it, but this JS thing is all alien to me.
The recommended way would be to run a web server or use something like Electron and build a desktop app (as #chrisG points out in the comments). But if you wanna do this in the browser without an web server you could do something like:
Run Chrome with the --allow-file-access-from-files (or however you allow local file access in your browser of choice)
Put your JSON in a js file and load it (to just do this you don't need the flag, but if you want to use absolute path you'll need it)
Related
Please read carefully before marking as dupe.
I want to read a javascript file on frontend. The javascript file is obviously being used as a script on the webpage. I want to read that javascript file as text, and verify if correct version of it is being loaded in the browser. From different chunks of text in the js file, I can identify what version is actually being used in the end user's browser. The js file is main.js which is generated by angular build.
I know we can do something like creating a global variable for version or some mature version management. But currently, on production site, that will mean a new release, which is couple of months from now. Only option I have right now is html/js page, which can be directly served from production site, without waiting for new release.
So my question is, is it possible we can read a javascript file as text in hmtl/js code in the browser.
an idea can be :
use fetch api to get a container that can be use to async load the script
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
use text() method which return a promise to get text content
fetch('http://localhost:8100/scripts.js').then((res) => res.text()).then(scriptContent => {
// scriptContent contain the content of your script
// if (scriptContent.includes('version : 1.1.1')
console.log(scriptContent);
});
this is absolutely not an efficient way, but since you want to work without any new version release or working with a version management system
here is the thing
assume file's checksum (md5 sha125 or anything) of V1.0 equals X and you will calculate before the coding part.
if checksum(X) != X{
location.reload()
}
would help for a security features too since it's an important project.
another way of controlling this situation is changing the main.js file's name if it is possible.
I'm trying to write a chrome-extension that closes tabs when they're loaded and their links contain specific keywords, which I've saved in a .json file. Because the content.js has no access on the browser peripherals, I had to use the background.js script to close the tab. So far the extension does all that except loading the data from the .json, which means that I had to write the json (just for testing) into the background.js. Because I want to ban a lot of links this is'nt an option for me. So I decided on storing a list with the links in a .json file, which is stored in the same folder as the background.js, which means that it's on the localhost and not on any kink of webserver. That means that it should be possible to access this file, because after my research, I came to the assumption that the background.js runs on the localhost as well. So there should'nt occur any file accessing limitation issues right?
Unfortuantely I've got no idea how to write this in pure .js, because all the tutorials or posts here are either accessing the file from or in a webserver or using some kind of fancy library. This should be possible without one right?
chrome.webNavigation.onCompleted.addListener(closeTab, {
url: [
{urlPrefix: 'https://www.google.de/'},
{urlPrefix: 'https://sghm.eu/iserv/login'},
]
});
function closeTab(e) {
if (!e.frameId) {
chrome.tabs.remove(e.tabId);
}
}
this is how my code looks now, I want to have some kind of loadData('data.json') function that returns the .jsons content, so that I can delete this whole .json data strucure within the js.
It should be possible to access the javascript object notation language via javascript.
I personally think you can do this far easier and faster with using Chrome.storage. The data is saved as a json object and easy to reference and it sounds like exactly what you need as you're just referencing key/pair values anyway.
I want to create some extension to VSCode using its Webview feature. I want to show HTML preview as a feature of my extension. As I can see in VSCode API documentation of WebView the paths for resources have to be registered and edit in a special way.
I want to load HTML from the file and then edit and register all paths to CSS and JS into it to create the preview of this one. In my opinion, using some DOM manipulating is the easiest way to create it. Simple import of jsdom doesn't work, even if the same example works in plain Node.js. Have anyone done a similar thing in the way it works well? Maybe there is some other way to solve this problem.
Thank you in advance.
I have done this in the past and the way that it worked was to read that file (with fs in my case) that contains the HTML and render it afterwards. Any resources you want to use have to be passed inside the localResourceRoots array as an option in the vscode.ViewColumn.
Here is a full example:
const panel = vscode.window.createWebviewPanel(
'catCoding',
'Cat Coding',
vscode.ViewColumn.One,
{
// Only allow the webview to access resources in our extension's media directory
localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
}
);
I have difficulty display graph with json file. I have try to run the example(load-external-json.html) provide by the application but it can't display graph.
I look through the web for solution but haven't find one solution that solve my problem.
the plug-in use: plugins/sigma.parsers.json/sigma.parsers.json.js
sigma.parsers.json("data/arctic.json", // Here I need to put the filepath instead of "data.json"
{
container: document.getElementById('container'),
settings: {
defaultNodeColor: '#00a',
edgeColor: 'default',
defaultEdgeColor: '#a00'
} });
Best Regards,
luis
I believe this plugin makes an XHR request to get the specified file (in this case data/arctic.json). That means you may need a run a server locally in order to see this work properly.
If you have Python installed, an easy way to do this is to run python -m SimpleHTTPServer from the directory where load-external-json.html is located. Then you should be able to see it live at http://localhost:8000/load-external-json.html.
From sigma.js wiki on github:
Sigma provides many code examples to show you what it can do and how to use it. Some of these examples load external data files, and you need to access them through a local server to see the examples working.
you need to run a simple Node based http server. Just follow the instructions on the wiki:
https://github.com/jacomyal/sigma.js/wiki
I'm thinking of doing some online file manipulation for mobile users, the idea being that the user provides a URL to the file, then the file contents are modified by the JS, and can then be downloaded. But I haven't been able to figure out how to get the file when it's on a separate domain using just JS.
Is this possible? If so any hints or examples would be appreciated.
Just wanted to add that part of what I wanted to do was make it available without my hosting it. I'm thinking of something like a a file they can host somewhere,and then all of the bandwidth is their own...and that of wherever they are getting the file from of course.
The only way to load contents of a file on another domain is from within a <script> tag. This is how JSONP works. Look into getting your target file into this format.
The other way would be to use a local proxy. Create a web service method that loads and returns the contents of the file, then call that locally using your favorite JavaScript framework.
Depending on how you think of public webservices, and within some limitations I'm still mapping, you can do this using an ajax call to YQL, like so.
(will expand the answer later).
http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20data.uri%20where%20url=%22http://t3.gstatic.com/images?q=tbn:ANd9GcSyART8OudfFJQ5oBplmhZ6HIIlougzPgwQ9qcgknK8_tivdW0EOg%22
One of the limitations of this method is file size, it currently tops out at 25k.