Map nested array with JavaScript

Question

I'm trying to map a nested array using .map(), so I could display and pinpoint all London underground locations in a 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'
                    }
                }
           }
       ]

I need the coordinates array elements down in the geometry obj.

this is my code so far...

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

and this is the error log...

Uncaught TypeError: Cannot read property 'coordinates' of undefined

any help welcomed.

feautres is an array, not an object, so you can't use object notation for it. It should be something like features[0].geometry — Jayce444
– Jayce444, Commented Feb 1, 2019 at 9:13
As pointed out by Jayce444, you need a index into the features array. — SPlatten
– SPlatten, Commented Feb 1, 2019 at 9:14

Code Maniac · Accepted Answer · 2019-02-01 09:18:26Z

6

features is an array and you need to access it using 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);

answered Feb 1, 2019 at 9:18

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fernando Brandao Over a year ago

Thanks for that, it did work. However, I'm only getting the first set of coordinates. Any idea why?

Abdeladel Majdeb · Accepted Answer · 2019-02-01 10:06:25Z

You are trying to access to a property geometry of an array features which is wrong So you have to map it like this

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

Your final code should be like this

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

wentjun · Accepted Answer · 2019-02-01 09:14:17Z

0

You were trying to use .map() on the undergroundGeoJson object. .map() can only be used on arrays. I believe you are trying to iterate through the array of objects in this.undergroundGeoJson.features? You have to do this instead:

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

answered Feb 1, 2019 at 9:14

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Comments

Monica Acha · Accepted Answer · 2019-02-01 09:24:09Z

0

Since map works in looping through arrays, you can start the mapping from 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);

edited Feb 1, 2019 at 9:24

answered Feb 1, 2019 at 9:17

Monica Acha

1,0869 silver badges16 bronze badges

4 Comments

Treycos Over a year ago

Will this code may answer the question, an explanation of what you changed would highly help the OP

Ashish Over a year ago

You are map function will return undefined, you just want to consol.log, why not try forEach?

Monica Acha Over a year ago

@Treycos Changes made as suggested!

Monica Acha Over a year ago

@Ashish Changes made as suggested!

Collectives™ on Stack Overflow

Map nested array with JavaScript

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related