We Keep Coding

Create HTML dynamically depending of Node variables

I am using Node.js with Express as a server. The user can upload a .CSV file with data. I'm parsing these data and store this in a main array composed of arrays (each line = one array). For now, I'm rendering a page (made with Pug) with this variable.
res.render('index', { rows });
The page is rendering as I would like to the user. However, I'd like to save the rendered "index" in a HTML file. The goal is to convert the HTML file into a PDF (which already works as a result of previous tests with static HTML).
Is it possible to save the rendered page as a HTML file? I'd like to take advantage of the feature of passing variable through the render function.
Another solution would be to generate by myself the HTML file, and do my own logic inside the Node.js route. That seems a long and useless solution since the render function do it well. I just need to save it instead of rendering it.

You could call PUG directly to trigger a render and then save the produced file (https://pugjs.org/)

Passing large data batches to Pug file from Node/Express

Note that this has been edited since the initial posting
I am building a Data Dashboard using NodeJs, Express, and Pug and have a question regarding the passing of data from NodeJs/Express to the Pug file.
I know that you can pass variables directly to the Pug file through express's local variables as seen below:
res.render('index', {title: 'This is the Title'});
My question is regarding the most efficient way of creating HTML using this data.
There are 3 main methods I am considering using and would like a more experienced insight into which may be the most suitable.
Dynamically generate elements in Javascript
The first option is to emit the data using Socket and then to create the HTML elements in Javascript using the data and appending them to the body.
My main worry with this option is that it may not be as efficient building large amounts of HTML in Javascript after the page has been rendered.
Create HTML Elements in Pug and supply data through Javascript
The second option I am considering is to create the elements with-in the Pug file (Only passing the number of elements) and then to supply the data through the Javascript after the page has rendered.
Create HTML elements completely in Pug
My final option is to pass all the data (Roughly 3 tables, around 5-10 rows with 5 columns of data) to the Pug file and to create the elements with the data inside the Template file.
I apologies if this question makes no sense, I'm relatively new to Pug, Express and Node but am finding myself improving every day. Any insights or tips/techniques would be extremely appreciated.
If theres any other information that may help, please do ask.
Thanks for reading!

Loading JSON FIle in FileMaker for D3 in WebViewer

I am trying to implement D3 graphs and charts in a FileMaker solution. I am stuck on loading a JSON file properly to be used in D3 code displayed in the webviewer.
I am loading all JS libraries into global variables ($$LIB.D3.JS, $$LIB.JQUERY.JS, etc.). Then I am placing the HTML code on the layout (giving an object name, i.e. html). The web viewer grabs the HTML code (from a text box on the layout) and JS code (from global variables) to render the page. This all works fine. (I am using this method detailed here: https://www.youtube.com/watch?v=lMo7fILZTQs)
However, the D3 code I have uses the getJSON() function to get a JSON, parse the data and create the visualization. I can't figure out a way to get the JSON file as a file from within FileMaker. I could put the content of the JSON file into a FileMaker variable and feed that into the HTML, but I then would not be able to use getJSON(). I would have to redo the D3 code to get the data from a JS variable and parse the data from the variable.
Is there a way for me to load a JSON file so FileMaker could use it to render the visualization properly in the WebViewer.

You have two options.
1. Calc the JSON into the HTML as you mentioned. Your right you will have to change how you load the JSON with d3. But its not tough. When you load the JSON from disk, using something like d3.json('/data.json', callback) you are just loading the json and then giving it to the callback function. If the JSON is in the HTML page in a something like var embeddedJSON You can just call the callback directly with the embeddedJSON like
callback (embeddedJSON)
Your code may look more like this.
d3.json('/data.json', function(data){
// bunch of d3 code
})
The callback in this case is an anonymous function. You can change it like this.
var render = function(data){
// bunch of d3 code
})
// then call render with your json variable that you embedded into the html
render ( embeddedJSON )
That will work just fine.
2. Export the html page to the temp directory, and export the json file with the data into right next to it. Then display the html using a file://url. In this case you can use d3.json(/data.json, callback ) and that will work just fine too.
Each of these methods have their pros and cons, but they both work.

In most cases, the best practice for integrating javascript or other assets in a Webviewer is to push assets to the temp directory (get this using GetTemporaryPath() in FileMaker), you can then export assets directly to named files. Once this is done, you can reference these files in your code using the file:// protocol.
This has numerous advantages over older methods, such as loading everything into global variables. One of the biggest of these is that provided you load your JSON into a discrete file and don't "pollute" any other files with FileMaker data, you can work entirely in the code environment of your choice, then simply move web JavaScript libraries, html, CSS, and other assets directly into your FileMaker solution.

Is it good to return html code to jquery?

I'm working on a project where it has a number of pages. Each page displays 10 rows where the layout that is using for each page is different. Until now I had the html code of each row in a javascript code and based on the page's url I was using the appropriate html code (if statement). The if statement is inside into a loop which is looping based on the number of rows. The results of the rows are coming from an ajax method. Now I want somehow to separate it so it can be more easily for me to maintain it, basically to remove the html code from the javascript and keep each row's html code into a different file.
Note: the Ajax is in a given time, is sending automatically requests to the php file for any new rows.
One solution which I came out is that I can use the php to create a variable with the html code .
Second solution is to create an array of each record with the html code and then pass it to jquery to print it.
Both solutions I don't know if are good solutions and can help me to maintain the project in the future.

You might consider a template library such as handlebars to help with templating. Frameworks such as AngularJS and Ember also excel at solving these kinds of problems.
Your Web Services API should be returning JSON though, not HTML fragments. Let the client build the DOM, and let the server focus on data.

You should return structured data (see JSON for example) to your AJAX request. This way, you can support multiple interfaces (e.g., a website, an application): each interface will get only the data, and will handle the rendering as it needs.
In your example, you ask for data via an AJAX request, your server responds with a JSON-structured response. JQuery reads it and converts it to javascript array thanks to jQuery.getJSON. With your array, you loop through each element and insert html elements into the webpage.

You have two options:
If your HTML templates is not changing frequently, the best way is to define html templates in your HTML structure using some java script template library (eg. Handlebars) and fill it with data from your AJAX (JSON) requests.
If your HTML templates change frequently or depends on some conditions (data) in row, you should create PHP partial views which generate proper html structure already filled with data.
For many rows it is better idea to create whole table server side to reduce requests.

Pass data to Javascript from ProMotion WebScreen

I am building an iOS app using the wonderful RubyMotion framework and ProMotion gem stack.
I want to display a chart in a PM::WebScreen on my iPhone. I reference an HTML file in the content method, and have (1) the HTML file, (2) my custom JS methods file, (3) my JS chart library (HighCharts), and (4) jQuery in my resources folder. All this renders fine.
I am able to create the data array for the chart in my PM::WebScreen file (I get the data from an API call to an external source.) The chart renders fine with static data typed in.
The Problem
I want to pass my the data array to my custom JS file to get it to draw the chart with dynamic data. How can I do that?
I would prefer not to make an ajax call from my JS because I may want to use that array elsewhere in my RubyMotion/ProMotion code.
If I can pass the data to the HTML file, I suppose I could extract it to JS from there using jQuery.
Please advise. Thanks!

You can use the webview method stringByEvaluatingJavaScriptFromString. For example, if you have a JS function included in your html called loadData that take data as an argument, you can do
In your JS:
function loadData(data) {
// do something with your data
$("#chart").show();
}
In RM:
data = dataFromSource
webView.stringByEvaluatingJavaScriptFromString('loadData(' + data +')')