javascript - 应用 Laravel 8 + Livewire 动态检查值到脚本中
问题描述
我正在使用 laravel 8 和 livewire 开发一个应用程序。
在我的应用程序中，我需要在表格中显示从数据库中获取并按月和年分组的数据，我可以这样做并且它可以正常工作。
然后从这个数据集中，我以最近三年的值为例2021, 2020, 2019，并用它们来填充图表。
当我进行第一次渲染时，我得到了正确的行为并显示了图表。但是当我去过滤表中的数据时imposta，对于特定imposta类型的数据可能少于三年，因此我会收到Undefined offset: year不存在年份的错误。
我怎样才能知道年份是否存在？我已经尝试在脚本中使用 if-else 语句，但不起作用。
任何意见或建议表示赞赏
我的代码：
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Report pagamenti per anno</h4>
</div>
<div class="card-body">
<div class="row page-titles mx-0">
<div class="col-sm-8 p-md-0">
<div class="welcome-text">
<h4>Filtra</h4>
<div wire:ignore class="form-group" style="display: inline-block;">
<label>Anno di riferimento</label>
<select class="form-control" id="annoRif" wire:model="filter.anno"
name="anno" style="width:220px;">
<option value="false">Tutti</option>
@if (!empty($anni))
@foreach ($anni as $an)
<option wire:key="{{ $loop->index }}" value="{{ $an->year }}">
{{ $an->year }}</option>
@endforeach
@endif
</select>
</div>
<div wire:ignore class="form-group" style="display: inline-block;">
<label>Imposta</label>
<select class="form-control" id="imposta" wire:model="filter.imposta"
name="imposta" style="width:220px;">
<option value="false">Tutte</option>
@if (!empty($nomi_imposta))
@foreach ($nomi_imposta as $n)
<option wire:key="{{ $loop->index }}" value="{{ $n->id }}">
@if ($n->descrizione_sintetica != '')
{{ $n->descrizione_sintetica }}
@else
{{ $n->descrizione_imposta }}
@endif
</option>
@endforeach
@endif
</select>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-responsive-md" style="min-width: 845px">
<thead>
<tr>
<th>Anno pagamento</th>
<th>Gennaio</th>
<th>Febbraio</th>
<th>Marzo</th>
<th>Aprile</th>
<th>Maggio</th>
<th>Giugno</th>
<th>Luglio</th>
<th>Agosto</th>
<th>Settembre</th>
<th>Ottobre</th>
<th>Novembre</th>
<th>Dicembre</th>
<th>TOTALE</th>
</tr>
</thead>
<tbody>
@if (!empty($report))
<?php $tot = 0.0; ?>
@foreach ($report as $key => $value)
<tr>
<td>{{ $key }}</td>
@if (isset($value[1]))
<td>{{ $value[1] }} €</td>
<?php $tot += $value[1]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[2]))
<td>{{ $value[2] }} €</td>
<?php $tot += $value[2]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[3]))
<td>{{ $value[3] }} €</td>
<?php $tot += $value[3]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[4]))
<td>{{ $value[4] }} €</td>
<?php $tot += $value[4]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[5]))
<td>{{ $value[5] }} €</td>
<?php $tot += $value[5]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[6]))
<td>{{ $value[6] }} €</td>
<?php $tot += $value[6]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[7]))
<td>{{ $value[7] }} €</td>
<?php $tot += $value[7]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[8]))
<td>{{ $value[8] }} €</td>
<?php $tot += $value[8]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[9]))
<td>{{ $value[9] }} €</td>
<?php $tot += $value[9]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[10]))
<td>{{ $value[10] }} €</td>
<?php $tot += $value[10]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[11]))
<td>{{ $value[11] }} €</td>
<?php $tot += $value[11]; ?>
@else
<td>0 €</td>
@endif
@if (isset($value[12]))
<td>{{ $value[12] }} €</td>
<?php $tot += $value[12]; ?>
@else
<td>0 €</td>
@endif
<td>{{ $tot }} €</td>
</tr>
<?php $tot = 0.0; ?>
@endforeach
@endif
</tbody>
<tfoot>
<th>Anno pagamento</th>
<th>Gennaio</th>
<th>Febbraio</th>
<th>Marzo</th>
<th>Aprile</th>
<th>Maggio</th>
<th>Giugno</th>
<th>Luglio</th>
<th>Agosto</th>
<th>Settembre</th>
<th>Ottobre</th>
<th>Novembre</th>
<th>Dicembre</th>
<th>TOTALE</th>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<!-- grafico report pagamenti per anno -->
<div class="col-xl-12 col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Report dei pagamenti incassati negli ultimi tre anni</h4>
</div>
<div class="card-body">
<div id="morris_bar" class="morris_chart_height"></div>
</div>
<div style="display: inline-block; align: center">
<p style="margin-left:15px;">Anni di pagamento:<br />
@if(!empty($anni[0]['year'])) <span class="badge badge-sm badge-primary"><label>{{ $anni[0]['year'] }}</label></span> @endif
@if(!empty($anni[1]['year'])) <span class="badge badge-sm badge-success"><label>{{ $anni[1]['year'] }}</label></span> @endif
@if(!empty($anni[2]['year'])) <span class="badge badge-sm badge-warning" style="color:white;"><label>{{ $anni[2]['year'] }}</label></span> @endif
</p>
</div>
<br>
</div>
</div>
</div>
@push('custom_scripts')
<script>
//Codice per popolare il grafico
var screenWidth = $(window).width();
var setChartWidth = function() {
if (screenWidth <= 768) {
var chartBlockWidth = 0;
chartBlockWidth = (screenWidth < 300) ? screenWidth : 300;
jQuery('.morris_chart_height').css('min-width', chartBlockWidth - 31);
}
}
// VALORI HARD CODED SOLO A FINI DI TEST DI STAMPA A VIDEO DEL GRAFICO
// VANNO POI MODIFICATI PER ESSERE DINAMICI
// HERE I'VE THE ERROR AFTER FILTERING DATA
if(typeof {!! $anni[0]["year"] !!} !== 'undefined'){
let anno0 = {!! json_encode($report[$anni[0]['year']]) !!};
}else{ let anno0 = null; }
if(typeof {!! $anni[1]["year"] !!} !== 'undefined'){
let anno1 = {!! json_encode($report[$anni[1]['year']]) !!};
}else{ let anno1 = null; }
if(typeof {!! $anni[2]["year"] !!} !== 'undefined'){
let anno2 = {!! json_encode($report[$anni[2]['year']]) !!};
}else{ let anno2 = null; }
//totale dinamico
var total0 = 0.00;
var total1 = 0.00;
var total2 = 0.00;
if (null !== anno0 || null !== anno1 || null !== anno2) {
Object.keys(anno0).forEach(function(k) {
total0 = total0 + anno0[k];
});
Object.keys(anno1).forEach(function(k) {
total1 = total1 + anno1[k];
});
Object.keys(anno2).forEach(function(k) {
total2 = total2 + anno2[k];
});
let Data = [{
y: 'Gennaio',
a: anno0["1"] !== undefined ? parseFloat(anno0["1"], 10).toFixed(2) : 0,
b: anno1["1"] !== undefined ? parseFloat(anno1["1"], 10).toFixed(2) : 0,
c: anno2["1"] !== undefined ? parseFloat(anno2["1"], 10).toFixed(2) : 0,
}, {
y: 'Febbraio',
a: anno0["2"] !== undefined ? parseFloat(anno0["2"], 10).toFixed(2) : 0,
b: anno1["2"] !== undefined ? parseFloat(anno1["2"], 10).toFixed(2) : 0,
c: anno2["2"] !== undefined ? parseFloat(anno2["2"], 10).toFixed(2) : 0,
}, {
y: 'Marzo',
a: anno0["3"] !== undefined ? parseFloat(anno0["3"], 10).toFixed(2) : 0,
b: anno1["3"] !== undefined ? parseFloat(anno1["3"], 10).toFixed(2) : 0,
c: anno2["3"] !== undefined ? parseFloat(anno2["3"], 10).toFixed(2) : 0,
}, {
y: 'Aprile',
a: anno0["4"] !== undefined ? parseFloat(anno0["4"], 10).toFixed(2) : 0,
b: anno1["4"] !== undefined ? parseFloat(anno1["4"], 10).toFixed(2) : 0,
c: anno2["4"] !== undefined ? parseFloat(anno2["4"], 10).toFixed(2) : 0,
}, {
y: 'Maggio',
a: anno0["5"] !== undefined ? parseFloat(anno0["5"], 10).toFixed(2) : 0,
b: anno1["5"] !== undefined ? parseFloat(anno1["5"], 10).toFixed(2) : 0,
c: anno2["5"] !== undefined ? parseFloat(anno2["5"], 10).toFixed(2) : 0,
}, {
y: 'Giugno',
a: anno0["6"] !== undefined ? parseFloat(anno0["6"], 10).toFixed(2) : 0,
b: anno1["6"] !== undefined ? parseFloat(anno1["6"], 10).toFixed(2) : 0,
c: anno2["6"] !== undefined ? parseFloat(anno2["6"], 10).toFixed(2) : 0,
}, {
y: 'Luglio',
a: anno0["7"] !== undefined ? parseFloat(anno0["7"], 10).toFixed(2) : 0,
b: anno1["7"] !== undefined ? parseFloat(anno1["7"], 10).toFixed(2) : 0,
c: anno2["7"] !== undefined ? parseFloat(anno2["7"], 10).toFixed(2) : 0,
}, {
y: 'Agosto',
a: anno0["8"] !== undefined ? parseFloat(anno0["8"], 10).toFixed(2) : 0,
b: anno1["8"] !== undefined ? parseFloat(anno1["8"], 10).toFixed(2) : 0,
c: anno2["8"] !== undefined ? parseFloat(anno2["8"], 10).toFixed(2) : 0,
}, {
y: 'Settembre',
a: anno0["9"] !== undefined ? parseFloat(anno0["9"], 10).toFixed(2) : 0,
b: anno1["9"] !== undefined ? parseFloat(anno1["9"], 10).toFixed(2) : 0,
c: anno2["9"] !== undefined ? parseFloat(anno2["9"], 10).toFixed(2) : 0,
}, {
y: 'Ottobre',
a: anno0["10"] !== undefined ? parseFloat(anno0["10"], 10).toFixed(2) : 0,
b: anno1["10"] !== undefined ? parseFloat(anno1["10"], 10).toFixed(2) : 0,
c: anno2["10"] !== undefined ? parseFloat(anno2["10"], 10).toFixed(2) : 0,
}, {
y: 'Novembre',
a: anno0["11"] !== undefined ? parseFloat(anno0["11"], 10).toFixed(2) : 0,
b: anno1["11"] !== undefined ? parseFloat(anno1["11"], 10).toFixed(2) : 0,
c: anno2["11"] !== undefined ? parseFloat(anno2["11"], 10).toFixed(2) : 0,
}, {
y: 'Dicembre',
a: anno0["12"] !== undefined ? parseFloat(anno0["12"], 10).toFixed(2) : 0,
b: anno1["12"] !== undefined ? parseFloat(anno1["12"], 10).toFixed(2) : 0,
c: anno2["12"] !== undefined ? parseFloat(anno2["12"], 10).toFixed(2) : 0,
}, {
y: 'TOTALE',
a: total0.toFixed(2),
b: total1.toFixed(2),
c: total2.toFixed(2),
}];
var barChart = Morris.Bar({
element: 'morris_bar',
data: Data,
xkey: 'y',
ykeys: ['a', 'b', 'c'],
labels: ['{{ $anni[0]["year"] }}', '{{ $anni[1]["year"] }}', '{{ $anni[2]["year"] }}'],
barColors: ['#3a7afe', '#10ca93', '#ff9f00'],
hideHover: 'auto',
gridLineColor: 'rgba(80, 63, 88, 0.56)',
resize: true,
barSizeRatio: 0.45,
});
}
</script>
@endpush
解决方案
推荐阅读
- c# - 我们如何在下载/上传 dropbbox 方法中获取文件 mime-type/content-type？
- r - 为 geom_point 和 geom_line 创建不同的配色方案：ggplot2
- javascript - javascript - for 循环 - 仅每隔一个事件侦听器工作
- java - Java Criteria API - 如何使用 MySQL 的 ANY_VALUE
- c# - 以用户身份使用 selenium 打开 Chrome
- nginx - 扩展 realurl - 在 URL 中显示 SQL 查询部分
- java - Kotlin函数返回类型中的`out Interface`
- java - 为什么Java接口常量被Checkstyle中的ConstantName检查视为非公共的
- javascript - 带有 jQuery json 数据的动态菜单
- javascript - 如何在浏览器通知 Web API 中添加自定义按钮？