Estoy trabajando en un trabajo de práctica. Estoy tratando de crear una ventana emergente modal cuando se hace clic en la fila de la tabla y aparece la información relevante para el estado en el que se hizo clic.
el JSON está devolviendo esto:
"data": [ { "ID State": "04000US01", "State": "Alabama", "ID Year": 2019, "Year": "2019", "Population": 4903185, "Slug State": "alabama" } ]y estoy tratando de extraer la línea Slug State para usarla en otra API usándola en la llamada.
function BuildStatesByPopulation(data) { if (stateTable != null) { for (var i = 0; i < data.length; i++) { let addRow = `<tr id="stateData" class='clickable-row' onClick=SelectStateOpenModal(${data[i]["Slug State"]})> <td>${data[i].State}</td> <td>${data[i].Population}</td> </tr>` stateTable.innerHTML += addRow; //console.log(data[i]["Slug State"]); } } } function SelectStateOpenModal(stateName) { let setState = String(stateName); let stateDisplay; let stateJson console.log(stateName); $.ajax({ type: 'GET', url: stateInformation+setState, success: function (response) { stateJson = response.data; stateDisplay = document.getElementById('modalView'); console.log(stateJson); } }); }Cuando se hace clic en la fila de la tabla en la consola, regresa:
index2.html:71 Error de referencia no detectado: nebraska no está definido en HTMLTableRowElement.onclick (index2.html:71:87)
Aquí hay una sugerencia que usa un conjunto de datos para pasar el Slug State a un controlador de eventos.
function BuildStatesByPopulation(data) { if (stateTable != null) { data.forEach(d => { // Create a row element let tr = document.createElement("tr"); tr.classList.add("clickable-row"); tr.dataset.slug = d["Slug State"]; // Set an event listener tr.addEventListener("click", SelectStateOpenModal); // Create the two tds let td1 = document.createElement("td"); td1.innerText = d.State; let td2 = document.createElement("td"); td1.innerText = d.Population; // Appends everything tr.append(td1); tr.append(td2); stateTable.append(tr); }) } } // In the event handler, get the Slug State from this.dataset function SelectStateOpenModal() { let setState = this.dataset.slug; // ... }