为什么我不能将这些额外的数据推送到我的阵列中?

时间:2017-06-08 14:12:14

标签: javascript jquery arrays

我正在进行API调用,这是响应

enter image description here

如您所见,键0和& 1对于他们的' outcome_status'而密钥2则填充。 返回的结果数量是动态的

我希望循环播放结果并推送'类别' &安培; '位置'数据中的详细信息以及if' outcome_status'不是NULL然后我希望将这些数据添加到同一个数组中。

问题是,在检查outcome_status是否为null的IF语句中,我不能将forloop var i;变量指定为关键字  mapData我第二次使用.push()

  

line:68 Uncaught TypeError:无法读取属性' push'未定义的

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++) {      

编辑:我想这样做。

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

但如果没有outcome_status则会失败...所以我将第二部分添加到条件中

         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');
    }
 });

2 个答案:

答案 0 :(得分:1)

问题:

在这里,您将i初始化为1:

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

然后将一个项目推送到mapData[]

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

稍后,您尝试访问mapData[i] ...

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

这是尝试访问mapData[1],但mapData[]此时只有一个项目。您需要mapData[0]

解决方案:

尝试简单地将i更改为初始化为0而不是1

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

如果这还不够,且data[]需要为1个索引,那么mapData[i-1]代替mapData[i]可能符合您的需求。

答案 1 :(得分:1)

一些问题:

  • 您的for循环以 i 等于1开头,因此即使在第一次推送后,mapData[i]仍然不存在,因此将push应用于此毫无意义。
  • 如果您想要push现有数组的其他元素,则不应将这些附加元素添加为数组的一部分,而应将它们作为push的单独参数提供。

此外,在使用map等数组方法时,代码会变得更有用。

以下是填充mapDataheatmapData的部分的外观:

// 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);
}));