I made a static website hosted on an AWS s3 bucket.
I do not know the tools and technology around web development, but I took an example of index.html code allowing me to plot data from a single file named "my_data_file1.csv".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Coding Train: Data and APIs Project 1</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<h1>Global Temperatures</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
window.addEventListener('load', setup);
async function setup() {
const ctx = document.getElementById('myChart').getContext('2d');
const globalTemps = await getData();
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: globalTemps.years,
datasets: [
{
label: 'Temperature in °C',
data: globalTemps.temps,
fill: false,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderWidth: 1
}
]
},
options: {}
});
}
async function getData() {
const response = await fetch('my_data_file1.csv');
const data = await response.text();
const years = [];
const temps = [];
const rows = data.split('\n').slice(1);
rows.forEach(row => {
const cols = row.split(',');
years.push(cols[0]);
temps.push(parseFloat(cols[2]));
});
return { years, temps };
}
</script>
</body>
</html>
All of my data is split into multiple files, so I would like to be able to account for all the CSV files in a directory, rather than just one. The name of my files is variable, so I cannot list them one by one.
Is it possible to use a filter or RegEx as "*.csv"?
Is it possible to use a filter or RegEx as "*.csv"?
No.
While URLs can be generated by mapping files and directories from a filesystem to URLs, a URL isn't a directory.
There is no way to glob URLs.
You could ensure that the server, when asked for ./ returns a list of URLs and then parse and filter it with client-side JS, and then request each of those URLs (probably using Promise.all to determine when you had a response for every one of those requests).
You could also write server-side code to concatenate all the CSV data so you only have to make one request.
Related
I am trying to setup a dev environment for developing widgets. In the book Third Party JavaScript They describe how to simulate multiple domains by modifying your hosts file and configuring Apache web server to create two virtual hosts. I was wondering if something similar is possible using the rollup-plugin-dev development server which uses the fastify-http-proxy.
Rollup Config:
...
const devPlugin: Plugin = dev({
dirs: ['dev'],
port: 5000,
// How to configure this?
proxy: []
});
...
Basically I want to serve the widget IIFE code from one domain, say widget.dev and a test html file which loads the script code on another domain, say publisher.dev. The HTML page at publisher.dev would have a <script> tag which loads the widget:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Widget Test Page</title>
<link href="/widget.css" rel="stylesheet" type="text/css"/>
<script async src="http://widget.dev"></script>
</head>
<body>
<div id="widget" data-border></div>
<script>
window.widget = {
// widget config...
}
</script>
</body>
</html>
One way to solve this problem for development is to serve up your widget on some port and then create a separate project that will reach out to grab the js files. I created a separate react app that loaded the script files from the port they are served on. So to keep it extremely simple, in my App.js file of the dev host project I did something like this:
App.js
import React, { useState, useEffect } from 'react';
export const loadScript = (src, id, onError) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onerror = (e) => onError(e, 'script', 'could not load script');
script.setAttribute('data-id', id);
document.head.appendChild(script);
};
export const loadStyle = (href, id, onError) => {
const link = document.createElement('link');
link.href = href;
link.rel="stylesheet";
link.type="text/css";
link.onerror = (e) => onError(e, 'link', 'could not load style');
link.setAttribute('data-id', id);
document.head.appendChild(link);
};
const App = () => {
// run this effect one time only
useEffect(() => {
loadStyle('http://localhost:5100/myWidget.css', 'widget-style');
loadScript('http://localhost:3001/myWidget.js', 'widget-id');
}, []);
// ...
};
Depending on your use case, there are (probably) better ways to achieve this.
I'm a programming beginner. . Now I'm having a problem that I struggle to solve ... I want to write a numeric data in the H2 tag that I import via API call. I have tried in various ways, making a console log the data exists but it seems that I am wrong something to richamarlo in H2. I seek help in understanding and resolving this error. Thank you
enter code here
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
const intervalTime = 10 * 1000;
const container = document.getElementsByClassName("u-text u-text-palette-3-base u-title u-text-3");
const endpoint = "https://*************/v0/*******/************************/collections/****************?offset=0&limit=unlikely";
function onInterval() {
fetch(endpoint, {
method: "GET",
headers: { Authorization: "Bearer **********************" }
})
.then((res) => res.json())
.then((data) => {
const title = data.records.map((a) => {
return{
close: (a.close)
};
});
const lastClose = title[title.length - 1];
console.log(lastClose);
});
}
onInterval();
window.setInterval(onInterval, intervalTime);
</script>
</head>
<body>
<h2><p class="u-text u-text-palette-3-base u-title u-text-3"></p>
</h2>
</body>
</html>
I want to download this file and print its contents to the console using an in-browser IPFS node. The following html file should do the job:
<!doctype html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
</head>
<body>
<script type='text/javascript' src='https://unpkg.com/ipfs#0.55.1/dist/index.min.js'></script>
<script type="text/javascript">
var ifile = 'Qmc3zqKcwzbbvw3MQm3hXdg8BQoFjGdZiGdAfXAyAGGdLi';
(async () => {
const inode = await Ipfs.create({
config: {
Addresses: {
Swarm: [
// These webrtc-star servers are for testing only
'/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
'/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
]
},
Bootstrap: []
}
})
window.inode = inode; //For poking
for await (const chunk of inode.cat(ifile)) {
console.log(chunk.toString());
}
})();
</script>
Testing IPFS file fetch
</body></html>
But it doesn't print anything. What am I missing?
You don't have any bootstrap nodes, so it can't find the CID. If you add my node for example, it works fine:
<!doctype html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
</head>
<body>
<script type='text/javascript' src='https://unpkg.com/ipfs#0.55.1/dist/index.min.js'></script>
<script type="text/javascript">
var ifile = 'Qmc3zqKcwzbbvw3MQm3hXdg8BQoFjGdZiGdAfXAyAGGdLi';
(async () => {
const inode = await Ipfs.create({
config: {
Addresses: {
Swarm: [
// These webrtc-star servers are for testing only
'/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
'/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
]
},
Bootstrap: []
}
})
window.inode = inode; //For poking
await inode.swarm.connect("/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt");
for await (const chunk of inode.cat(ifile)) {
console.log(chunk.toString());
}
})();
</script>
Testing IPFS file fetch
</body></html>
I use Handsontable in my project. I needed to insert data in a table from my database in Spring. I know how to do it with Thymeleaf :
<tr th:each="row : ${tariffs}">
<td th:text="${row.warehouse}"></td>
</tr>
But how I can insert or get data from the js script?
It's my code with the table, I think we can add data in const data with cycle help
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
</head>
<body>
<div id="tariffTable" th:each="row : ${tariffs}"></div>
<script>
const data = [
['1234', Als, Town1],
['1235', Bas,Town2],
['1236', Oxa, Town3]
];
const container = document.getElementById('tariffTable');
const hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
colHeaders: [
'Tariff',
'Warehouse',
'Town'
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
});
</script>
</body>
</html>
And how we can get data if I insert rows on the web-interface?
I used this logic and its work. Here we get data from spring and parse this data in js, after that we can insert this data in the table
let dataFromSpring = [[${tariffs}]];
let dataObj = [];
for(let obj of dataFromSpring){
let object = {
warehouse: obj["tariff"],
fmWarehouse: obj["warehouse"],
town: obj["town"],
};
dataObj.push(object);
}
I'm getting the following error on my EmberCLI app: Could not read config from meta tag with name "my-app-name/config/environment"
I read that it has to do with having the correct content-for handlebars in app/index.html but I have all of them there:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My app name</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for "head"}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/my-app-name.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/my-app-name.js"></script>
{{content-for "body-footer"}}
</body>
</html>
My config/environment.js file is:
/* jshint node: true */
module.exports = function(environment) {
var ENV = {
modulePrefix: 'my-app-name',
environment: environment,
contentSecurityPolicy: { 'connect-src': "'self' https://auth.firebase.com wss://*.firebaseio.com" },
firebase: 'https://my-app-name.firebaseio.com/',
baseURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
}
};
if (environment === 'development') {
// ENV.APP.LOG_RESOLVER = true;
// ENV.APP.LOG_ACTIVE_GENERATION = true;
// ENV.APP.LOG_TRANSITIONS = true;
// ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
// ENV.APP.LOG_VIEW_LOOKUPS = true;
}
if (environment === 'test') {
// Testem prefers this...
ENV.baseURL = '/';
ENV.locationType = 'none';
// keep test console output quieter
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
}
if (environment === 'production') {
}
return ENV;
};
Am I missing a meta tag?
Is this also the reason my browser only displays when I deploy the app through firebase:
{{content-for "head"}} {{content-for "head-footer"}} {{content-for "body"}} {{content-for "body-footer"}}
Thanks!
Ember by default stores config data in a meta tag. In my app, we opted out of storing in the meta tag, I think due to neededing to support IE8.
You can quickly fix this in your ember-cli-build.js or brocfile.js adding this line:
module.exports = function(defaults) {
var app = new EmberApp({
//...
});
app.options.storeConfigInMeta = false;
});
You can read more here:
https://github.com/ember-cli/ember-cli/pull/2298