vandalv,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
padding: 2px 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="grid-holder"></div>
<script type="text/template" id="grid-template">
<table>
<thead>
<tr>
<th>№</th>
<th>дата</th>
<th>сумма</th>
<th>продукты</th>
</tr>
</thead>
<tbody>
<% for(var i = 0; i < list.length; i++) { %>
<tr><td>
<%=i + 1%>
</td>
<td>
<%=new Date(list[i].data).toLocaleDateString()%>
</td>
<td>
<%=list[i].total%>
</td>
<td>
<ul>
<% for(var k = 0; k < list[i].produkt.length; k++) { %>
<li>
<%=list[i].produkt[k].name%>
</li>
<% } %>
</ul>
</td>
</tr>
<% } %>
</tbody>
</table>
</script>
<script>
function randomValueBetween(min, max) {
return Math.random() * (max - min) + min;
}
function randomDate(date1 = '01-01-2017', date2 = new Date().toLocaleDateString()) {
date1 = new Date(date1).getTime();
date2 = new Date(date2).getTime();
return randomValueBetween(date2, date1)
}
function getElem(arr)
{
return arr[randomValueBetween(0, arr.length)|0]
}
var vegString=["Apple","Apricots","Avocado","Banana","Blackberries"];
var bases = Array.from({length : 10}, _ => {
var total = 0,
produkt = Array.from({length : 5}, _ => {
var num = randomValueBetween(100, 999)|0,
name = getElem(vegString),
price = randomValueBetween(1, 100).toFixed(2),
count = randomValueBetween(1, 100)|0;
total += price * count;
return {num, name, price, count}
}),
data = randomDate();
total = total.toFixed(2);
return {data, total, produkt}
})
var tmpl = document.getElementById('grid-template').innerHTML.trim();
tmpl = _.template(tmpl);
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' ,tmpl({
list: bases
}));
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' , '<h1>5 фактур по найбольшей стоимости</h1>');
var sortTotal = bases.slice(0).sort((a,b)=> a.total - b.total).slice(-5);
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' ,tmpl({
list: sortTotal
}));
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' , '<h1>фактуры по возрастанию стоимости, в которых есть Avocado</h1>');
var filterAvocadoSortTotal = bases.filter(base => base.produkt.some(el => el.name == 'Avocado')).sort((a,b)=> a.total - b.total);
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' ,tmpl({
list: filterAvocadoSortTotal
}));
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' , '<h1>фактуры за 2018 год, по возрастанию даты</h1>');
var filterDataSort = bases.filter(base => (new Date(base.data)).getFullYear() == 2018).sort((a,b)=> a.data - b.data);
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' ,tmpl({
list: filterDataSort
}));
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' , '<h1>фактуры за первые полгода 2019 год, по возрастанию даты</h1>');
var dataStart = new Date(2019, 0, 1, 0, 0, 0, 0), dataEnd = new Date(2019, 6, 0, 0, 0, 0, 0);
var filter2019Sort = bases.filter(base => base.data >= dataStart && base.data <= dataEnd).sort((a,b)=> a.data - b.data);
document.getElementById('grid-holder').insertAdjacentHTML('beforeEnd' ,tmpl({
list: filter2019Sort
}));
</script>
</body>
</html>