使用JavaScript映射嵌套数组

时间:2019-02-01 09:10:33

标签: javascript arrays reactjs

我正在尝试使用.map()映射嵌套数组,因此我可以在地图中显示并精确定位伦敦的所有地下位置。

this.undergroundGeoJson = [
        {
            'type': 'FeatureCollection',

            'crs': { 'type': 'name', 'properties': { 'name': 
            'urn:ogc:def:crs:OGC:1.3:CRS84' } },

            'features': [
                {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [-0.278126, 51.5025]
                    },
                    'properties': {
                        'name': 'Acton Town'
                    }
                },
                {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [-0.263033174, 51.50883531]
                    },
                    'properties': {
                        'name': 'Acton Central'
                    }
                },
                {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [-0.262879534, 51.50856013]
                    },
                    'properties': {
                        'name': 'Acton Central'
                    }
                }
           }
       ]

我需要在几何对象中放置坐标数组元素。

到目前为止,这是我的代码...

@computed
    get undergroundLatLongs() {
    return this.undergroundGeoJson.map((u) =>
    [u.features.geometry.coordinates[0], 
    u.features.geometry.coordinates[1]]);
}

这是错误日志...

Uncaught TypeError: Cannot read property 'coordinates' of undefined

欢迎任何帮助。

4 个答案:

答案 0 :(得分:2)

features是一个数组,您需要使用index

进行访问
 u.features[i].geometry.coordinates[0]
           ^^^

const undergroundGeoJson =[{'type':'FeatureCollection','crs':{'type':'name','properties':{'name':'urn:ogc:def:crs:OGC:1.3:CRS84'}},'features':[{'type':'Feature','geometry':{'type':'Point','coordinates':[-0.278126,51.5025]},'properties':{'name':'ActonTown'}},{'type':'Feature','geometry':{'type':'Point','coordinates':[-0.263033174,51.50883531]},'properties':{'name':'ActonCentral'}},{'type':'Feature','geometry':{'type':'Point','coordinates':[-0.262879534,51.50856013]},'properties':{'name':'ActonCentral'}}],}];

const ret = undergroundGeoJson.map((u,i) => [
  u.features[i].geometry.coordinates[0],
  u.features[i].geometry.coordinates[1],
]);

console.log(ret);

答案 1 :(得分:1)

您正在尝试访问数组geometry的属性features,这是错误的 所以您必须这样映射

u.features.map(f => f.geometry.coordinates[0])

您的最终代码应该是这样

this.undergroundGeoJson = [{
  'type': 'FeatureCollection',

  'crs': {
    'type': 'name',
    'properties': {
      'name': 'urn:ogc:def:crs:OGC:1.3:CRS84'
    }
  },

  'features': [{
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-0.278126, 51.5025]
      },
      'properties': {
        'name': 'Acton Town'
      }
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-0.263033174, 51.50883531]
      },
      'properties': {
        'name': 'Acton Central'
      }
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-0.262879534, 51.50856013]
      },
      'properties': {
        'name': 'Acton Central'
      }
    }
  ]
}]
function undergroundLatLongs() {
 return this.undergroundGeoJson.map((u) =>
    [u.features.map(f => f.geometry.coordinates[0]), 
    u.features.map(f => f.geometry.coordinates[1])]);
}
console.log(undergroundLatLongs());

答案 2 :(得分:0)

您试图在.map()对象上使用undergroundGeoJson.map()仅可用于数组。我相信您正在尝试遍历this.undergroundGeoJson.features中的对象数组吗?您必须改为:

this.undergroundGeoJson.features.map(u => {
   console.log(u) // this will print each object within `features`
   return u; // don't forget to return something
})

答案 3 :(得分:0)

由于地图可用于遍历数组,因此可以从this.undergroundGeoJson [0]。开始进行映射。

this.undergroundGeoJson = [{
  'type': 'FeatureCollection',

  'crs': {
    'type': 'name',
    'properties': {
      'name': 'urn:ogc:def:crs:OGC:1.3:CRS84'
    }
  },

  'features': [{
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-0.278126, 51.5025]
      },
      'properties': {
        'name': 'Acton Town'
      }
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-0.263033174, 51.50883531]
      },
      'properties': {
        'name': 'Acton Central'
      }
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-0.262879534, 51.50856013]
      },
      'properties': {
        'name': 'Acton Central'
      }
    }
  ]
}]
function undergroundLatLongs() {
return this.undergroundGeoJson[0].features.map((u) =>
[u.geometry.coordinates[0], 
u.geometry.coordinates[1]]);
}
var x= undergroundLatLongs();
console.log(x);