Quiero aplicar una clase diferente para la ventana emergente según la temperatura (variable tempData) recibida del archivo json. Básicamente seleccionando la clase según la temperatura en esta línea.
<div class=" bg-a bg-b bg-c bg-d bg-e py-3 rounded mx-4" id= "popBox" >A continuación se muestra mi ejemplo de código donde busco los datos y creo un objeto para pasar mis datos json al mapa. Traté de hacer alguna condición if else antes de mi variable obj, pero eso no funcionó.
fetch('mapdata.json') .then(function(response){ return response.json(); }) .then(function (data) { appendMapData(data); }) function appendMapData(data){ data.map(function(element){ var pmData = element.pm25 var locName = element.name var tempData = parseInt(element.temperature) var longitude = element.longitude var latitude = element.latitude var final = [longitude,latitude] var obj = { 'type': 'Feature', 'properties': { 'temperature' : tempData, 'description': //------------------custom popup `<div class="card bg-dark-blue d-block pt-4 text-white"> <span class="d-block text-center"> ${locName} </span> <span class="d-block small text-center mb-3">23:00, Mar 16 (local time)</span> <div class=" bg-a bg-b bg-c bg-d bg-e py-3 rounded mx-4" id= "popBox" > <h5 class="d-block text-center h3" id="exampleModalLabel">${tempData}</h5> <span class="d-block text-center">Moderate</span> </div> <div class="modal-body"> <div class="row mt-3"> <span class="col-md-6 small">PM25</span> <span class="col-md-6 text-right small"> ${pmData} µg/m³</span> </div> <div class="progress mt-2"> <div class="progress-bar bg-state-moderate border-0" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="text-center"> <a href="https://airqualitydev.wpengine.com/aq_sensors/${locName}?lon=${longitude}&lat=${latitude}" class="my-3 btn btn-outline-light">See in-depth <i class="fa-solid fa-circle-arrow-right"></i></a> </div> </div> </div>` }, 'geometry': { 'type': 'Point', 'coordinates': final } } return featuresArray.push(obj) }) }¿Cómo puedo hacer esto?