I have a table with data from a rest API. The table has objects with unique ids and I have a group filter with unique group ids. The group id does not appear in the table, therefore I have to create an array which only contains the ids of the table objects. Every time the group changes the array will be updated.
My goal is to show only the table objects which are in the array I have created before.
During research I found this interesting example, but I can’t get it to work.
HTML:
JavaScript
x
41
41
1
<div class="row ">
2
<div class="col-12">
3
<div class="input-group">
4
<div class="input-group-prepend">
5
<div class="input-group-text" id="searchAddon"><i class="fa fa-search" aria-hidden="true"></i></div>
6
</div>
7
<input type="text" class="form-control form-control-sm" id="searchInput" placeholder="Fahrzeug suchen" autocomplete="off" title="Funknummer" v-model="vehicleSearch" v-bind:disabled="filterDisabled">
8
<div class="input-group-append">
9
<button class="btn btn-outline-secondary btn-sm" type="button" @click="vehicleSearch = ''" v-bind:disabled="filterDisabled"><i class="fa fa-times" aria-hidden="true"></i></button></span>
10
</div>
11
</div>
12
</div>
13
</div>
14
15
<div class="row mt-3" name="selectVehicleFilterGroup">
16
<div class="col-sm-12">
17
<select id="dropDownVehicleFilterGroupSidebar" class="custom-select custom-select-sm" v-model="vehicleGroup" @change="updateTomTomGroupSelect" v-bind:disabled="filterDisabled">
18
<option v-for="group in tomTomVehicleGroup" v-bind:value="group.objectgroupuid">{{ group.objectgroupname }} ({{ group.objectcount }})</option>
19
20
</select>
21
</div>
22
</div>
23
<div class="row mt-3">
24
<div class="col-12">
25
<div class="custom-control custom-checkbox">
26
<input type="checkbox" class="custom-control-input" id="CheckboxShowActiveVehicle" title="Aktive Fahrzeuge anzeigen" v-model="filterActiveVehicle" v-bind:disabled="filterDisabled">
27
<label class="custom-control-label" for="CheckboxShowActiveVehicle">Aktive Fahrzeuge  <span id="spanActiveVehicle" class="badge badge-secondary">{{ countActiveVehicle.length }}</span></label>
28
</div>
29
</div>
30
</div>
31
32
<table class="table table-hover table-sm" style="">
33
<thead>
34
</thead>
35
<tbody>
36
<tr v-for="vehicle in filteredTomTomVehicle" :key="vehicle.properties.objectuid" v-bind:id="vehicle.properties.objectno">
37
<td>{{ vehicle.properties }}</td>
38
</tr>
39
</tbody>
40
</table>
41
Vue:
JavaScript
1
150
150
1
var vehicleList = new Vue({
2
el: '#appTomTomVehicleList',
3
data: {
4
tomTomVhehicle: [], // Array A
5
tomTomVehicleGroup: [],
6
tomTomVehicleObjects: [], // Array with group id and object id
7
tomTomGroupSelect: [], // Filter Array B
8
vehicleSearch: undefined,
9
vehicleGroup: '1-44060-0414****',
10
filterActiveVehicle: false,
11
filterDisabled: true,
12
loading: true
13
14
},
15
methods: {
16
17
18
getTomTomVehicle: function() {
19
20
var self = this;
21
22
$.getJSON('http://127.0.0.1/app/index.php/api/1/vehicle/showAll?format=json', function(data) {
23
self.tomTomVhehicle = data;
24
})
25
.done(function() {
26
// console.log('TomTom vehicle loaded');
27
28
})
29
.fail(function(data) {
30
console.log('TomTom vehicle: '+data.statusText+' ('+data.status+')');
31
// console.log(data.responseText);
32
})
33
.always(function() {
34
// console.log('always');
35
self.filterDisabled = false;
36
self.loading = false;
37
});
38
},
39
getTomTomVehicleGroup: function() {
40
41
var self = this;
42
$.getJSON('http://127.0.0.1/app/index.php/api/1/vehicleGroup/showGroups?format=json', function(data) {
43
self.tomTomVehicleGroup = data;
44
})
45
.done(function(data) {
46
// console.log('TomTom vehicle group loaded');
47
})
48
.fail(function(data) {
49
console.log('TomTom vehicle group: '+data.statusText+' ('+data.status+')');
50
// console.log(data.responseText);
51
})
52
.always(function() {
53
// console.log('always');
54
});
55
},
56
getTomTomVehicleObjects: function() {
57
58
var self = this;
59
$.getJSON('http://127.0.0.1/app/index.php/api/1/vehicleGroup/showObjects?format=json', function(data) {
60
self.tomTomVehicleObjects = data;
61
})
62
.done(function(data) {
63
// console.log('TomTom vehicle objects loaded');
64
})
65
.fail(function(data) {
66
console.log('TomTom vehicle objects: '+data.statusText+' ('+data.status+')');
67
// console.log(data.responseText);
68
})
69
.always(function() {
70
// console.log('always');
71
});
72
73
},
74
updateTomTomGroupSelect() {
75
76
var self = this;
77
78
this.tomTomGroupSelect = [];
79
80
this.tomTomVehicleObjects.forEach(function(element) {
81
82
if (self.vehicleGroup === element.objectgroupuid) {
83
84
self.tomTomGroupSelect.push(element.objectno)
85
}
86
})
87
88
}
89
},
90
computed: {
91
92
filteredTomTomVehicle: function() {
93
94
let vehicles = this.tomTomVhehicle.features;
95
96
if (this.vehicleSearch) {
97
vehicles = vehicles.filter((v) => {
98
return v.properties.objectno.indexOf(this.vehicleSearch.trim()) !== -1
99
100
});
101
}
102
103
if (this.filterActiveVehicle) {
104
vehicles = vehicles.filter((v) => {
105
return v.properties.ignition === 1 && v.properties.standstill === 0;
106
});
107
}
108
109
if (this.vehicleGroup) {
110
111
/*
112
vehicles = vehicles.filter((v) => {
113
return v.properties.objectno.indexOf(this.tomTomGroupSelect);
114
});
115
*/
116
}
117
118
return vehicles;
119
120
},
121
countActiveVehicle: function() {
122
123
let vehicles = this.tomTomVhehicle.features;
124
125
if (vehicles != undefined) {
126
vehicles = vehicles.filter((v) => {
127
return v.properties.ignition === 1 && v.properties.standstill === 0;
128
});
129
this.count = vehicles.length
130
} else {
131
vehicles = 0;
132
}
133
return vehicles
134
}
135
},
136
mounted: function() {
137
138
var self = this;
139
140
this.getTomTomVehicle();
141
this.getTomTomVehicleObjects();
142
this.getTomTomVehicleGroup();
143
144
setInterval(function() {
145
self.getTomTomVehicle();
146
// this.getTomTomVehicle();
147
}, 60000)
148
}
149
});
150
Advertisement
Answer
I got the solution:
JavaScript
1
7
1
if (this.vehicleGroup && this.tomTomGroupSelect.length !== 0) {
2
3
vehicles = vehicles.filter((v) => {
4
return this.tomTomGroupSelect.includes(v.properties.objectno);
5
});
6
}
7