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

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=1&text=&objectIds=&time=&geometry={"points":[[-83.37872222,38.69880556],[-83.4914,38.7967],[-83.5158,39.0125],[-82.19744444,40.80505556],[-82.31222222,40.85666667],[-82.26127778,40.62986111],[-82.36422222,40.77169444],[-80.57108333,41.90666667],[-80.95447222,41.68336111],[-80.77036111,41.58586111],[-80.75966667,41.73586111],[-81.9569,39.4003],[-81.8708,39.2044],[-82.0806,39.4861],[-82.1868889,39.2517778],[-82.2122,39.4417],[-85.2122,41.5555]]}&geometryType=esriGeometryMultipoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=FLD_ZONE, 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);
   }

CodePudding user response：

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=1&text=&objectIds=&time=&geometry={"points":[[-83.37872222,38.69880556],[-83.4914,38.7967],[-83.5158,39.0125],[-82.19744444,40.80505556],[-82.31222222,40.85666667],[-82.26127778,40.62986111],[-82.36422222,40.77169444],[-80.57108333,41.90666667],[-80.95447222,41.68336111],[-80.77036111,41.58586111],[-80.75966667,41.73586111],[-81.9569,39.4003],[-81.8708,39.2044],[-82.0806,39.4861],[-82.1868889,39.2517778],[-82.2122,39.4417],[-85.2122,41.5555]]}&geometryType=esriGeometryMultipoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=FLD_ZONE, 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);
}