I‘m using node.js, express and handlebars.
Currently I‘m passing json via res.render() to hbs. In the hbs I‘m using {{#each dataJson}} to iterate over it and list the contents of my json. Now... what if my json had like a million entries? It would take forever to load my page then, right?
Now to my Question:
How do I load that dynamic? I want the page to load the html from the json while showing what‘s already loaded.
Sorry for my bad english. It‘s not my native language.
Best regards
Naggelus
You would need to implement a lazy loading mechanism.
Instead of loading all the million records on the initial load, you would need to send it in chunks. Based on the view port, the records can be decided and load the first page. When the user goes over those records, you need send another API request to fetch the next chunk and so on.
This would load only the necessary records to the UI.
Related
I have a Django application where the logging is being printed to a file using the logging module.
I want to be able to have the contents of the log file also display on an html page such if a new line gets printed to the log page, the html page will also actively update to display the new line without having to be refreshed.
How can that be accomplished?
You need JavaScript for updating HTML without refreshing the page.
Create or edit the HTML with JavaScript and use AJAX for fetching latest logs every x seconds or how often you want the page to update. AJAX calls some Django view that returns the log data. For example, the view could read 10 latest lines from a log file and return that. JSON is probably the easiest format to work with but any format is fine (doesn't have to be XML like in the picture).
Tutorial for doing something like this with Django + jQuery
Depending on how complicated the logging page is, you may want to check out Django's documentation for JavaScript, storing JavaScript files in the project if JS code is not just in the HTML files, Django Rest Framework and different JavaScript libraries/frameworks such as React or Vue.
I am spending too much time writing code that already happens easily with WWW::Mechanize.
I'm searching for specific <td> classes in HTML using WWW::Mechanize. When I find my specific entry and append it to a list, I want to also initiate another WWW::Mechanize object on raw HTML data (as in, "fetch" the page; the page being my raw HTML data).
I can't find any constructors for WWW::Mechanize to construct without ->get() / etc. I just want to feed my raw HTML data into a new object and go from there, but I just can't find how!
I think I clarified my question without the need of posting code, but will if requested.
I would like to visualize data from csv file at node-red ui.
What I would like to do is to show behind a flag of a country the countity from the csv file. So into the csv file I have 2 columns (country, quantity).
Because of I am new at node-red I would like to get some hints how to do that.
Thanks in advance.
my flow with CSV data
Welcome to Node-RED!
Firstly you need to decide what kind of UI you would like. Node-RED has options for a number ranging from the creation of data driven web pages using the http-in/out and template nodes through the more dynamic but slightly more complex Dashboard through to full-power dynamic web-apps using things like node-red-contrib-uibuilder.
The very simplest approach is to use an http-in and an http-out node to define a web page. Then to add your file reader after the http-in then the CSV node (which turns the CSV data into JSON). Then you could use node-red-contrib-tableify to turn your JSON into an HTML table. Finally use the template node to insert the table into the html that the http-out node sends back to the browser.
http-in -> file read -> csv -> tablify -> template -> http-out
Once you've mastered that, you could go on either to smarten up the template or swap to using Dashboard or even uibuilder depending on your needs.
I have to create a web page first, right?
You define the URL in the http-in node. When the -in is connected to the -out, you have a "page". Albeit with no content. To create content you can use the template node. In fact, pushing the csv data through the tablify node and into the template would give you enough of a page to see the data. The templatate itself need only be:
<pre>{{payload}}</pre>
Though, of course, you can also wrap that with other HTML elements as needed. But that alone should be enough to render something useful.
How can I trigger the http-in?
You simply reference the URL from your browser. So if you set the http-in node to use URL /fred and you used a browser on the same device that is running Node-RED, you would use the URL http://localhost:1880/fred in your browser.
How should I design the web page to be able to put the information from the csv file into it by the http-out node?
The tablify node does that for you.
String together what I've outlined and you should see something that will let you go further.
I suggest just using http-in, template and http-out nodes to start so that you can see how they work together. Then feed in your data without the csv or tablify nodes, then add the csv and finally the tablify. That way you can see how things work.
I wanted to develop a small search website where I will be storing the data in XML files. When we search anything, it should display those data as table format in html. How does one retrieve the data from XML files?
Below is the basic thing to display data of only two columns, but I want to display data dynamically:
html file:http://www.w3schools.com/xml/xml_applications.asp
This is the sample code for retrieving the data from xml only for two columns.
Well the first problem I see is that you have two functions in there that are not being called. Nothing programmatic will happen in this scenario. When you have a method you need to call said method with myFunction(). I would recommend reading up a little more on javascript instead of copying and pasting it and expecting it to just "work"
To further elaborate, you removed the function call from the example you took when you took off the button. What is your xml endpoint? (it's not going to be the same as the example unless you build it to be that way). In this example it's just an xml file that is hosted on the server with the same root as the html.
Recently I've found that I can use pure HTML, CSS and JS to build Android app (and iOS also maybe), by using PhoneGap. I guess it converts HTML pages to Android web views. So basically I'll have ~10 HTML files, calling each other, get data from Server (it's Java and Tomcat) via Ajax and JSONP.
And my problem is about storing user data with these static local HTML files.
As they are local files, I can't use Cookie. But somehow Session's still working, so with each HTML page, I can set an onload event that sends an Ajax request, then get data. But it's very inconvenient, I have to do that for the same data each time I switch to another HTML file. So, is there any solution I can load all data when the first HTML file is loaded, store data somewhere, then reuse these data in others HTML files ? Thank you so much for reading my question.