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);
}
Related
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 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.
I try to plot 3 temperature series into a single highcharts chart.
The data comes from 3 seperate JSON files in the format:
[
[1567529940953,43.4],
[1567530001644,43.3],
[1567530062503,43.4],
[1567530123220,43.4],
[1567530184116,43.4]
]
Additionally the JSON file is periodically updated so I want the chart to update itself every time the JSON files change or every minute or so.
I looked into enablePolling and that works perfect.
I have tried a lot but or I have multiple series and no polling or I have a single series and polling....
The best I could do was:
<script type="text/javascript">
Highcharts.stockChart('container', {
chart: {
type: 'spline'
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'all',
text: 'All'
}]
},
title: {
text: 'Live Data (Rows JSON)'
},
yAxis: {
min: 15,
max: 50,
startOnTick: false,
endOnTick: false
},
subtitle: {
text: 'Data input from a remote JSON file'
},
data: {
rowsURL: window.location.origin + '/chart/terrarium_basking.json',
firstRowAsNames: false,
enablePolling: true
}
});
</script>
I needed to use window.location.origin in order to get it to work on my website. Not sure why www.reptile-addict.nl/chart/terrarium_basking.json didn't work!?
If it helps the other JSON streams are terrarium_ambient.json and terrarium_ceiling.json
EDIT: Think I got it to work.. :)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highstock Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script type="text/javascript">
var seriesOptions = [],
seriesCounter = 0,
names = ['basking','ambient','ceiling'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
series: seriesOptions
});
}
function getJsonData() {
$.each(names, function (i, name) {
path = window.location.origin + '/chart/terrarium_' + name + '.json';
$.getJSON(path, function (data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
seriesCounter = 0;
}
});
});
}
getJsonData();
setInterval( function(){ getJsonData(); }, 60000);
</script>
</body>
</html>
I got stuck with the http get method which is used to get the json data.
The http get method is working fine it is actually fetching the json data, but I'm not able to connect it with the object literal.
To explain clearly here is the piece of code where I'm stuck.
var x ={};
$http.get('chart.json') //reading the studentRecord.json file
.success
(function(data1){
//alert(data1);
$scope.x = data1;
});
var conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource: x
});
I'm trying to apply the http.get method to the dataSource:to fetch the json data to it but, its not working. And my main task is to apply the http.get request to the dataSource:which makes my code work properly.
And let me give you the entire piece of code to understand better.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>FusionCharts - Funnel 3D Chart</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<!-- A funnel 3D Chart showing a conversion analysis in percentage of visiting to purchase in Harry's Supermart website last year
Attribute :
# showPercentValues - set to 1 to show the values in percentage.
-->
<div id="chart-container" ng-controller="ParentCtrl" ng-init='load()' ng-model="dataSource1">FusionCharts will render here</div>
</body>
</html>
script.js
var myApp = angular.module("myApp", []);
//The below code will read the data from student.json file and will pass to the $scope variable
myApp.controller("ParentCtrl", function($scope, $http)
{
$scope.load = function(){
//alert("2");
FusionCharts.ready(function () {
//alert("1");
var conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource : function(){
$http.get('chart.json') //reading the studentRecord.json file
.success
(function(data1){
alert(data1);
$scope.dataSource = data1;// binding the data to the $scope variable
});
}
});
conversionChart.render();
});
};
});
chart.json
{
"chart": {
"caption": "Ensource sales report",
"subcaption": "Purchase - Conversion analysis for last year",
"decimals": "1",
"isHollow": "0",
"isSliced": "1",
"labelDistance": "15",
"plotTooltext": "Success : $percentOfPrevValue",
"theme": "fint",
"baseFontSize":"18"
},
"data":
[
{
"label": "Total",
"value": "385634"
},
{
"label": "Contacts",
"value": "175631"
},
{
"label": "Leads",
"value": "84564"
},
{
"label": "Sanctioned",
"value": "35654"
},
{
"label": "Disbursed",
"value": "12342"
}
]
}
My main intention is to use the http.get method to fetch the json data to
dataSource :
Plunker:http://plnkr.co/edit/HUKvROQv8wIiFfx6uZBk?p=preview
I'll be very thankfull if somebody help me with this .Plz help me because I'm new bee to angular
Based on your plunker, the code should be:
var myApp = angular.module("myApp", []);
//The below code will read the data from student.json file and will pass to the $scope variable
myApp.controller("ParentCtrl", function($scope, $http)
{
$scope.load = function(){
//alert("2");
FusionCharts.ready(function () {
//alert("1");
var conversionChart;
$http.get('chart.json') //reading the studentRecord.json file
.success
(function(data1){
//alert(data1);
$scope.dataSource = data1;// binding the data to the $scope variable
conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource : $scope.dataSource
});
conversionChart.render();
});
});
};
});