My goal is to dynamically change the background-color of elements based on values in an array. However, I am facing a problem where all elements are displaying with the same color instead of changing according to the value.
I have attempted using jQuery with AJAX to achieve this, but despite console messages indicating success, the result on my site does not match. I really could use some guidance here.
The code snippet below shows one of my AJAX functions. It is supposed to display 1 green element and 4 brown/red ones. Yet, I keep seeing either all red or all green elements.
Here is the array I receive:
[1776220,17 ,242332 ,1119098, 500633]
function listThem() {
let color = '';
$.ajax({
type: "GET",
url: "php/vehiculos/testServicio.php",
data: "data",
success: function(response) {
let dynamicData = JSON.parse(response);
// DYNAMIC SERVICE VARIABLE
// Resetting here
$.each(dynamicData, function(i, elem) {
if (dynamicData[i] <= 86400) {
console.log(elem);
color = '#51d847';
}
if ((dynamicData[i] > 86400) && (dynamicData[i] < 172800)) {
console.log(elem);
color = '#F18D05';
}
if (dynamicData[i] >= 172800) {
console.log(elem);
color = '#E54028';
}
});
}
});
}
$.ajax({
url: 'php/vehiculos/listing.php',
type: 'GET',
success: function(response) {
/** Convert response into usable object */
let dataList = JSON.parse(response);
let template = '';
dataList.forEach(vehicle => {
template += `<tr taskId=${vehicle.posId}>
<td class=''>
<a>${vehicle.name}</a>
</td>
<td style='background-color:${color}';>
${vehicle.ultimaUpdate}
</td>
<td>${vehicle.phone}</td>
<td>${vehicle.category}</td>
</tr>`
$('#registros').html(template);
});
}
})