Pushing elements from an object to an array, but in a for...of loop

Question

I'm getting an arr.push is not a function error, and I am not sure why. There are a lot of questions related to this, but I could not find a solution - it seems it should be working. Am I missing something? I would like some insight on what is going on here.

I believe it has something to do with the for...of loop I am using. Should I try to use a regular for loop somehow instead? Why might this be occurring if this is the issue? What rule am I missing here?

JS (api takes a minute or two):

let zoneArr = [];

fetch('https://hazards.fema.gov/gis/nfhl/rest/services/public/NFHL/MapServer/28/query?where=1%3D1&text=&objectIds=&time=&geometry=%7B%22points%22%3A%5B%5B-83.37872222%2C38.69880556%5D%2C%5B-83.4914%2C38.7967%5D%2C%5B-83.5158%2C39.0125%5D%2C%5B-82.19744444%2C40.80505556%5D%2C%5B-82.31222222%2C40.85666667%5D%2C%5B-82.26127778%2C40.62986111%5D%2C%5B-82.36422222%2C40.77169444%5D%2C%5B-80.57108333%2C41.90666667%5D%2C%5B-80.95447222%2C41.68336111%5D%2C%5B-80.77036111%2C41.58586111%5D%2C%5B-80.75966667%2C41.73586111%5D%2C%5B-81.9569%2C39.4003%5D%2C%5B-81.8708%2C39.2044%5D%2C%5B-82.0806%2C39.4861%5D%2C%5B-82.1868889%2C39.2517778%5D%2C%5B-82.2122%2C39.4417%5D%2C%5B-85.2122%2C41.5555%5D%5D%7D&geometryType=esriGeometryMultipoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=FLD_ZONE%2C+ZONE_SUBTY&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=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson')
            .then(function (response) {
                return response.json();
            })
            .then (function (data) {
                appendData1(data);
            })
            .catch(function (err) {
                console.log('error: ' + err);    
            });

  function appendData1(data) {
     for (let obj of data['features']) {
       var zone = obj['attributes']['FLD_ZONE'];
       zoneArr = zoneArr.push(zone);
       }
     console.log(zoneArr);
   }
 

Answer 1

push mutates the original array and returns a new length. So you are reassigning zoneArr to be a number after the first iteration.

Replace zoneArr = zoneArr.push(zone); with just zoneArr.push(zone);

let zoneArr = [];

fetch('https://hazards.fema.gov/gis/nfhl/rest/services/public/NFHL/MapServer/28/query?where=1%3D1&text=&objectIds=&time=&geometry=%7B%22points%22%3A%5B%5B-83.37872222%2C38.69880556%5D%2C%5B-83.4914%2C38.7967%5D%2C%5B-83.5158%2C39.0125%5D%2C%5B-82.19744444%2C40.80505556%5D%2C%5B-82.31222222%2C40.85666667%5D%2C%5B-82.26127778%2C40.62986111%5D%2C%5B-82.36422222%2C40.77169444%5D%2C%5B-80.57108333%2C41.90666667%5D%2C%5B-80.95447222%2C41.68336111%5D%2C%5B-80.77036111%2C41.58586111%5D%2C%5B-80.75966667%2C41.73586111%5D%2C%5B-81.9569%2C39.4003%5D%2C%5B-81.8708%2C39.2044%5D%2C%5B-82.0806%2C39.4861%5D%2C%5B-82.1868889%2C39.2517778%5D%2C%5B-82.2122%2C39.4417%5D%2C%5B-85.2122%2C41.5555%5D%5D%7D&geometryType=esriGeometryMultipoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=FLD_ZONE%2C+ZONE_SUBTY&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=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    appendData1(data);
  })
  .catch(function(err) {
    console.log('error: ' + err);
  });

function appendData1(data) {
  for (let obj of data['features']) {
    var zone = obj['attributes']['FLD_ZONE'];
    zoneArr.push(zone);
  }
  console.log(zoneArr);
}