No estoy seguro de entender realmente por qué esto se trata de esta manera: ¿es porque fetch intenta codificar todas las variables? Si es así, ¿cómo lo soluciono?
Esta URL de búsqueda funcionará cuando las únicas variables que coloque sean coordenadas (números). En mi código general, tengo una cadena que codifiqué yo mismo a partir de una matriz que puede tener una estructura de paréntesis variable, por lo que ese es el razonamiento.
Cuando copio y pego esto en un navegador y pego mi variable donde debería ir, funciona. Pero la búsqueda no funciona.
¿Está Fetch tratando de hacer algo más con mi variable que ya tiene codificación? No lo entiendo, porque la parte no variable de la cadena ya está codificada, por lo que supongo que el problema tiene que ver con cómo la búsqueda está tratando la variable.
De todos modos, vea la estructura donde está la variable en mi URL también, supongo (lo siento, es larga):
JS:
let testString = "%5B%5B%5B-89.0000%2C40.5555%5D%2C%5B-89.1111%2C40.5555%5D%5D%5D"; fetch('https://hazards.fema.gov/gis/nfhl/rest/services/FIRMette/NFHLREST_FIRMette/MapServer/1/query?where=&text=&objectIds=&time=&geometry=%7B%22paths%22%3A+' + testString + '%7D&geometryType=esriGeometryPolyline&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=*&returnGeometry=false&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&returnExtentOnly=false&datumTransformation=¶meterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson') .then(function (response) { return response.json(); }) .then (function (data) { appendData(data); }) .catch(function (err) { console.log('error: ' + err); });Editar: incluso intenté ejecutar directamente la búsqueda con la cadena de mi variable, y funcionó. Entonces tiene que ver con la variable, simplemente no tiene mucho sentido.
Mi código de prueba desordenado completo (agregue las coordenadas a la lista y luego ejecute)
Edición 2: vea mi respuesta a continuación. En mi código real, tenía la funcionalidad de agregar/eliminar opciones que estaba causando un problema en mi función para obtener los datos. Necesitaba estas opciones para construir mi cadena utilizada en la búsqueda. Usé preventDefault() para solucionar el problema, pero todavía no estoy seguro de por qué funciona específicamente con eso.
Encontré mi problema, así que estoy respondiendo a mi pregunta. Sin embargo, agradezco cualquier explicación.
Publiqué un jsfiddle de mi código pero es un desastre, pero para resumir lo que estaba pasando:
Tenía una lista de opciones que el usuario podía agregar para agregar coordenadas y luego ejecutarlas. En el código de mi problema, se hizo referencia a estas opciones en una función GetData() que ejecutó mi búsqueda. Fuera de esa función GetData(), se crearon estas opciones, pero no pensé que ese fuera el problema porque los corchetes estaban cerrados alrededor de las funcionalidades de agregar y eliminar una opción.
Tenía un botón para agregar y un botón para eliminar. Estas funcionalidades se realizaron, por ejemplo, con:
btnRemove.onclick = (e) => { e.preventDefault(); // add/remove/getselected/etc functionalities here }Creé una función como esta para reemplazar mi función GetData(), leyendo:
linearGPSsubmit.onclick = (e) => { e.preventDefault(); }PreventDefault() fue originalmente para ayudar a la funcionalidad de agregar/eliminar.
Ese código anterior se ejecuta al hacer clic en el botón Enviar. Lo que no entiendo completamente es por qué se ejecuta la búsqueda cuando se usa preventDefault(). ¿No debería impedirme enviar el formulario? Sin embargo... no más 404 y el fetch fetch. Enfriar. Se siente mal , pero funciona.