使用JavaScript映射嵌套數組

Question

我正在嘗試使用.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'
                    }
                }
           }
       ]

我需要幾何obj中的坐標數組元素。

到目前為止，這是我的代碼...

@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

任何幫助表示歡迎。

Answer 1

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

Answer 2

您正在嘗試訪問錯誤的數組features的屬性geometry ，因此必須像這樣映射它

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()); 

Answer 3

您正在嘗試在undergroundGeoJson對象上使用.map() 。 .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
})

Answer 4

由於map可以在數組中循環，因此您可以從this.undergroundGeoJson [0] .features開始映射

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