How to send data from a nodejs file to an html page - javascript

I have a few plain text files from which I would like to take some strings and render them into an HTML file. The problem is that since nodeJs, which is what I am using to parse file data, is a server-side technology, I can't just link the nodeJs file to the html with something like <script type="text/javascript" src="./homepage.js"></script> and call something like document.querySelectorAll('area'); in the javascript file to get an element whose content I can customize. I have a nodeJs file that retrieves and manipulates data taken from the files. I want to manipulate this data and render it into the html file as I would usually do for a regular javascript file (using query selectors and the such). So how might I be able to take some data from my file system and render it into a certain html file?

Presuming you are using nodejs to render your html file, there are 3 ways:
when rendering the html, render the js code which contains the data as well, eg. JSON
your html can include <script type="text/javascript" src="http://your_nodejs_server/data.js"></script> which will fires a request to your nodejs server which will render the js file containing your data dynamically
which is similar to option 2, use REST API.

Related

When using mustache.js, how do I render my templates from a data url, not just a local file?

I understand how to take a mustache template and from a .json file on my local drive run something like mustache index.json project.mustache > test.html to get a static html file I can then use with all my templated content. But how do I replace index.json with say a data feed url like http://test.ookb.co/index.json? to make it easy to render updated files?

How to access a local JSON file with Javascript?

I have a Python program that generates an html page for reporting results. The html page is saved in an output directory on disk alongside a javascript file that helps with dynamic table handling. I also save a JSON file to this output directory that I would like to read in with my javascript file. This JSON file has data from the Python run (saved dictionary) that I would like to be able to access. So in an output directory on disk I have:
C:/somedirectory/output/report.html
C:/somedirectory/output/tables.js
C:/somedirectory/output/data.json
All files have been created from my program.
My html page has a table with checkboxes and if those checkboxes are selected I would like to update a second table based on data saved in the JSON file. Thus I would like to open my html report in any browser and read in the JSON file as a javascript object.
I have been trying to use ajax and .getJSON but am getting the
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I have searched and seen many similar problems but have not come across anything that quite fits what I need. Thoughts and a work around would be greatly appreciated. Thanks.
Update
Since everything is run locally on the client side I have decided to embed the JSON data (python dictionary) and javascript code directly into the html report output. This way the data is internally accessible and the html file can be passed around without dependency issues. The user with the answer I selected below has a link that eludes to this solution.
JavaScript runs on the client machine, hence it can only access files on the client machine using a special setup.
If you want it to read JSON on your server, you should use the path:
http://example.com/output/data.json
Better way would be to read/write JSON file from Python and then send the table data to JavaScript as in this answer: Send data from Python to Javascript (JSON)

How to save whole page as one file so that it works offline (including external javascript)?

I need to be able to save a page on my website to my harddrive, so that i can use it both online and offline. The thing is, the page uses references to javascript and CSS files outside it's own folder. It is very important that i can save the whole page as one .html file, so that all the javascript and CSS code from the external files are in that file as well.
Is there a way to do this?
This should be programatically
As you request, this can be done programmatically with lets say Python.
The pattern of the code would look like this:
Request the user to paste the url in a box
wget or curl the page and use regex to find out where the included codes are
OR: use a library like SGML to interact with the HTML tags directly
Put all the linked CSS, JS etc. files in a List
Fetch all the linked files their contents and put them in a List
Rebuild the HTML source code and strip out the and tags stuff
Now loop the linked files's contents in the tags like this:
newHeaderContent = ''
for content in linkedFilesArray:
newHeaderContent = newHeaderContent + content
newHTML = firstHTMLCode + newHeaderContent + lastHTMLCode

ExtJS: load JSON from an external file into TreePanel

You can grab data from here. Instead of saving JSON as a separate variable within the script file, is it possible to create a file pointer, and populate a Tree with one config option? Saving JSON in a variable does the job, but it's quite cumbersome!
You can't use files outside of things like AIR it's a security risk and the sandbox won't allow it. You can of course keep the JSON in an external file and request it through HTTP using a TreeLoader with AsyncTreeNode and preloading children OR simply evaluate the AJAX response yourself.

Javascript read files in folder

I have the following problem which I'm trying to solve with javascript. I have a div with a background image specified in a css file, and I want my javascript to change that image periodically (let`s say every 5 secs).
I know how to do that, the problem is that I have a folder of images to choose from for the back image. I need to be able to read the filenames (from the image folder) into an array, change the background image of the div, delay for 5 seconds and change again.
in your javascript, use an array like
var images = [ "image1.jpg", "image2.jpg", "image3.jpg" ];
function changeImage() {
var image = document.getElementById("yourimage");
image.src=$images[changeImage.imageNumber];
changeImage.imageNumber = ++changeImage.imageNumber % images.length;
}
changeImage.imageNumber=0;
setInterval(changeImage,5000);
The values in the array should be generated by your php
You're still going to need php or asp to query the folder for files. Javascript will not be able to "remotely" inspect the file system.
You can do something like the following in jQuery:
$.ajax({
url: 'getFolderAsArrayOfNames.php',
dataType: 'json',
success: function(data) {
for(var i=0;i<data.length;i++) {
// do what you need to do
}
});
});
And in your getFolderAsArrayOfNames.php, something like this:
echo "function "
.$_GET['callback']
."() {return "
.json_encode(scandir('somepath/*.jpg'))
."}";
If you are using Apache as your
web server, and
if you can configure
it to provide a default directory
listing for your images folder (use
the appropriate options in
httpd.conf and/or .htaccess), and
if you don't care that the list of
images is available to everyone who
visits your web site,
then you don't need PHP or any other server-side processing.
You can use XMLHttpRequest (or the jQuery ajax function, which is a nice wrapper) to get the listing for the folder. The response will be HTML and it will look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /demo1/images</title>
</head>
<body>
<h1>Index of /demo1/images</h1>
<pre><img src="/icons/blank.gif" alt="Icon "> Name Last modified Size Description<hr><img src="/icons/back.gif" alt="[DIR]"> Parent Directory -
<img src="/icons/image2.gif" alt="[IMG]"> tree.gif 17-Mar-2009 12:58 6.2K
<img src="/icons/image2.gif" alt="[IMG]"> house.gif 17-Mar-2009 12:58 6.5K
<img src="/icons/image2.gif" alt="[IMG]"> car.gif 02-Mar-2009 15:37 8.4K
<img src="/icons/image2.gif" alt="[IMG]"> elephant.jpg 02-Mar-2009 15:37 3.4K
<hr></pre>
<address>Apache/2.0.63 (Unix) Server at zeppo Port 80</address>
</body></html>
Since this output is pretty predictable, you might try parsing out the filenames using a JavaScript regular expression, but it's probably just as easy and more robust to create a hidden DIV on your page, put the HTML response into that DIV, and then use DOM methods to find <a href>s that are after <img> tags with an alt="[IMG]" attribute. Once again, using jQuery Selectors or similar helper methods available in other toolkits will make this DOM parsing pretty easy.
Once you have the URL of the new image (parsed from the href), you can set the new CSS background for your div with the .style.backgroundImage property.
You cannot do any file IO using JavaScript mainly because of security reason, so anyway you have to create some back end service which will update you with an list of available files in your folder. You don't have to do it in a hard way, you can use AJAX to it smoothly and nicely
You can't read a folder's contents, neither on the server nor on the clientside.
What you can do is to read the folder's contents with the help of a serverside script, and load it to a JavaScript array while processing the page.
This would not be ideal but in the absence of server-side processing (which you really should be doing--either PHP or Rails or Perl or whatever your host supports), you could allow directory listing on your images folder. This has security implications.
Then loading e.g., http://mysite.com/rotatingImages should respond with a list of files. You could do this with AJAX, parse out the relevant hrefs, push them onto an array and render your rotating images in JS.
You must send the list of names along with the JavaScript and then iterate through it.
A noted above, you can not access server's system from a client's browser (which is where JavaScript runs).
You have 3 possible solutions:
Create the JavaScript file via some dynamic back-end (php or perl scripts are best for that).
The main JavaScript function could still be static but the initialization of the array used by it (either as a snippet on the main HTML page or a separate .js imported file) would be a php/perl generated URL.
A recent StackOverflow discussion of the topic is at link text
Make an XMLHttpRequest (AJAX) call from your JavaScript to a separate service (basically a URL backed by - again - php/perl backend script) returning XML/JSON/your_data_format_of_choice list of files.
This is probably a better solution if you expect/want/need to refresh a frequently-changing list of images, whereas a pre-built list of files in solution #1 is better suited when you don't care about list of files changing while the web page is loaded into the browser.
An un-orthodox solution - if browsers you care about support animated background images (gif/png), just compile your set of images, especially if they are small sized, into an animated gif/png and use that as background.

Categories

Resources