CODEWITHSUNDEEP
javascriptarraysreactjs
Fernando Brandao
Fernando Brandao

Reputation: 117

Map nested array with JavaScript

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.

Upvotes: 2

Views: 22314

Answers (4)

Abdeladel Majdeb
Abdeladel Majdeb

Reputation: 55

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

Upvotes: 2

Monica Acha
Monica Acha

Reputation: 1086

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

Upvotes: 0

Code Maniac
Code Maniac

Reputation: 37775

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

Upvotes: 6

wentjun
wentjun

Reputation: 42596

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

Upvotes: 0

Related Questions