为什么不能将这些其他数据推入阵列？

Question

I'm making an API call and here is the response

As you can see, key 0 & 1 have NULL for their 'outcome_status' whereas key 2 is populated. The number of returned results is dynamic

I wish to loop the results and push the 'category' & 'location' details into the array and if 'outcome_status' isn't NULL then I wish to add that data into the same array.

The problem is, within the IF statement that checks if outcome_status is null, I can't assign the forloop var i; variable as the key for mapData where I use .push() the second time.

line:68 Uncaught TypeError: Cannot read property 'push' of undefined

var mapData = [];
function getPolApi(year,month,lat,lng,mapData) {
    $.ajax({
    url : "https://data.police.uk/api/crimes-at-location?date="+year+"-"+month+"&lat="+lat+"&lng="+lng,
    type : "get",
    async: false,
    success : function(data) {
      console.log(data);
      mapData = [];// Empty the array of old results
      for(var i = 1; i < data.length; i++) {      

EDIT: I want to do this.

            mapData.push([
              data[i]['category'],
              data[i]['location']['street']['name'],
              data[i]['outcome_status']['category'],
              data[i]['outcome_status']['date']
            ]); 

But if there is no outcome_status then it will fail... So I added the second part into a conditional instead

         if(data[i].outcome_status != null) { 

          //In order to access the original array by key,
         // I wish to the use the forloop iteration otherwise 
         //mapData.push() will add the data as NEW arrays instead of adding on to the end of the existing arrays.

          //Why can't I use the current index for the key here?

              mapData[i].push([ //line 68

              data[i]['outcome_status']['category'],
              data[i]['outcome_status']['date'],
            ]);
         }
           heatmapData.push(new google.maps.LatLng(data[i].location.latitude,data[i].location.longitude));
      }

      console.log(mapData);
       //Add results into view

          for(var i = 0; i < mapData.length; i++) {
             var fill = '<div class="row resu"><div class="col-xs-2 number"><h5>'+[i+1]+'</h5></div><div class="col-xs-10"><p class="text-primary">Type of crime: <span class="text-strong">'+mapData[i][0]+'</span></p><p class="text-primary">Location specifics: <span class="text-strong">'+mapData[i][1]+'</span></p></div></div>';
            $('.output').append(fill);

          }//endforloop

          //Move the map into view of the heatmaps
          moveMap(lat,lng);
          //Add the heatmaps
          addHeatMap();

      // console.log(mapData);
    },
    error: function(dat) {
       console.log('error');
    }
 });

Answer 1

The Issue:

Here, you initialize i as 1:

for(var i = 1; i < data.length; i++) {

---

You then push one item to mapData[] :

mapData.push([
    data[i]['category'],
    data[i]['location']['street']['name'],
]);

---

A couple lines later, you try to access mapData[i] ...

mapData[i].push([
    data[i]['outcome_status']['category'],
    data[i]['outcome_status']['date'],
]);

This is trying to access mapData[1] , but mapData[] only has one item at this point. You need mapData[0] .

---

The Solution:

Try simply changing your i to initialize as 0 instead of 1 :

for(var i = 0; i < data.length; i++) {

If this is not sufficient and data[] needs to be a 1-index, then perhaps mapData[i-1] instead of mapData[i] would suit your needs.

Answer 2

Some issues:

• Your for loop starts with i equal to one, so even after the first push, mapData[i] does not yet exist, so applying push to that makes no sense.
• If you want to push additional elements to an existing array, you should not add those additional elements as part of an array, but provide them as separate arguments to push .

Furthermore, the code becomes a bit more functional when use array methods like map .

Here is how the part to fill mapData and heatmapData could look like:

// Create a new array, with nested arrays: one per data item
mapData = data.map(function (item) {
    // Use a local variable to build the sub-array:
    var arr = [
      item.category,
      item.location.street.name,
    ];
    if (item.outcome_status) { // add 2 more elements if they exist
        arr.push( // note: no square brackets here
            item.outcome_status.category,
            item.outcome_status.date,
        );
    }
    // Add it to `dataMap` by returning it to the `map` callback:
    return arr;
});

// Extend the heatmap with additional locations
heatmapData = heatmapData.concat(data.map(function (item) {
    return new google.maps.LatLng(item.location.latitude,item.location.longitude);
}));