Develop Reference

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

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.

How to use a a library module in a front-end external javascript file?

Situation:
I have a server side running with express.js and there I get data from SQL database. I would like to show this data to the client side, by sending it to the client.
In the front-end, I need to take this data and make it into a chart. It is possible to do it with the tag in the HTML and include the Plotly library, which I want to use. However, I would like this operation to be done in a separate file, an external JS script for client. This avoids hard-to-read code in the HTML.
The problem is, how can I import Plotly to the external front-end file and use it?

I hope I understood your need correctly :
One simple option would be to include both of your script in your html related document with the one required by the second one first :
...
<script src="path script 1" />
<script src="path script 2 depending on script 1" />
so in your case using CDN :
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="path of your script where you use ploty"></script>
PS:
Also just a proposition but did you thing about importing Ploty in your js backend and use it in your front-end ? or with post/get or with socket ?

Well, simply load it from a CDN :) That's what CDNs are here for
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly-basic.min.js">

Cannot get the js file under the static folder in Flask

It all works in my local server, but when others try to deploy what I have done to the server, it fails.
the file system is the server something like:
SERVER_FOLDER
--homepage
----static
----templates
------404.html
----app.py
----config.py
for example: The server is: MY_SERVER
and then in my app.py, I use
#app.route('/homepage/')
#app.route('/homepage/index')
def index():
# TODO
to define the homepage, and #app.errorhandler(404) to redirect all the not found page to 404.html
So I can get access to my homepage with http://MY_SERVER/homepage/, a little different than my local server. That's one thing that I am confused.
What I think is that the app.py runs under the MY_SERVER rather than MY_SERVER/homepage right?
But, in this way, when I run a template in my template file, and the html template file will use the js file under the static folder. the response always shows the js file is not found.
when I use <script src="{{ url_for('static', filename='file.js') }}"></script>, it shows not found in MY_SERVER/static and return to 404
when I try <script src="../homepage/static/file.js"></script>, same result.
How to handle this?

Build toward your solution:
Get flask serving image files from static
Put an image in the static directory and call it from your browser: http://yoursite/static/some_image_there.jpg
Plug away until that works.
Get flask serving the js file directly to your browser
Now put your js file into static and do as you did for the image.
Plug away until you can call it from the browser:
http://yoursite/static/yourfile.js
get your html to call the js file from static
Now you know that there is no problem actually serving the file, and you know the exact url to it. So it's not a big step to getting the HTML to reference it and your browser to load it.

Add and parse my own JSON object in my Shopify Liquid theme

I added a JSON file to the assets folder in my Shopify liquid theme. I want to get and parse this JSON object in a jquery method from a javascript file in my assets folder. I've tried including the json file as an asset_url and I've tried using jquery's getJSON() method with the asset's path but the file can't be found. Does anyone know a good approach for adding a custom data object to a shopify liquid theme and the best way to access it?

You could save your JSON in a .liquid file and include it in your template. You'd define the JSON like this:
<script type="text/javascript">
window.my_json_obj = {
...
}
</script>
That way, you could access window.my_json_obj in your jQuery script. But if a key/value storage approach is enough for your needs, you should probably take a look at Shopify's metafields

how to instantiate a js object from .json file

I have included my json file like this
<script type="text/javascript" src="slideshows/1/myfile.json"></script>
And I wonder how I can now create a js object from this file?
If the json was defined inline, or defined in a .js-file it would already have a variable connected to it, but how does it work now that it is in a separate json file?

A JSON file is not a script. It is data.
You need to use a data access method, such as jQuery's $.getJSON() to get it.

Using script tags to import JSON in the page has only on useful use case, which is a way to prevent Cross-origin security issue from happening. We use it as JSONP in JavaScript by sending a callback attribute on the query-string:
<script type="text/javascript"">
window.getMyJSON = function(json){
};
</script>
<script type="text/javascript"
src="http://someotherdomain/slideshows/1/myfile.json?callback=getMyJSON">
</script>
BUT it seems here the JSON file is located just on the current domain, so as #Scimonster has pointed out you can simply achieve it using $.getJSON().