I'm not sure I really understand why this is being treated this way - is it because fetch tries to encode all variables? If so how do I fix it?
This fetch URL will work when the only variables I put into it are coordinates (numbers). In my overall code, I have a string that I encoded myself from an array that can have a varying bracket structure, so that is the reasoning.
When I copy and paste this into a browser and paste in my variable where it should go, it works. But the fetch doesn't work.
Is fetch trying to do something more to my variable that already has encoding? I don't understand, because the non-variable part of the string is already encoded, so I'm assuming the issue has to do with how fetch is treating the variable.
Anyway, see the structure where the variable is in my URL too, I guess (sorry it's long):
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);
});
Edit: I even tried straight up running the fetch with the string from my variable, and it worked. So it has to do with the variable - it just doesn't make much sense.
My full messy testing code (add the coordinates to list then run)
Edit 2: See my below answer. In my actual code I had add/remove options functionality that was causing an issue in my function to fetch the data. I needed these options to build my string used in the fetch. I used preventDefault() to fix the problem - but I'm still not positive on why it works with that specifically.
I found my issue, so I'm answering my question - I welcome any explanation though.
I posted a jsfiddle of my code but it's a mess, but to sum up what was going on:
I had a list of options that the user could add to add coordinates, and then run those. In my problem code, these options were referenced under a GetData() function which ran my fetch. Outside of that GetData() function, these options were created, but I didn't think that was the problem because the brackets were closed around both the add and remove an option functionalities.
I had a button for add, and a button for remove. These functionalities were made, for example, with:
btnRemove.onclick = (e) => {
e.preventDefault();
// add/remove/getselected/etc functionalities here
}
I created a function just like this to replace my GetData() function, reading:
linearGPSsubmit.onclick = (e) => {
e.preventDefault();
}
The preventDefault() was originally to help aid the add/remove functionality.
That code above executes on submit button click. What I don't fully understand is why the fetch runs at all when preventDefault() is used? Shouldn't it stop me from submitting the form? Nevertheless... no more 404 and the fetch fetches. Cool. It feels wrong, but it works.