const readings = [
{ location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' },
{ location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
{ location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' },
{ location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
{ location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' },
];
I want to group the below array of objects by location property.
The expected result is an array of objects with location and points(array of objects which have the same location).
Group array of objects using lodash or array reduce method
You can use .reduce
to group readings
by location
and then transform the resulting map to an array
of objects having location as key
and points list as value
:
const readings = [ { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' }, { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' }, { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' }, { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' }, { location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' }, ]; //group by location let res = _.reduce(readings, (acc,item) => { const { location: { lat, lng } } = item; const key = `${lat}-${lng}`; const prev = acc[key]; if(;prev) acc[key] = [item]. else acc[key];push(item); return acc, }; {}). //transform to array of objects location-points res = _.map(_,entries(res), ([location:points]) => ({ [location]; points })). console;log(res);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
Lodash groupBy will make it easier for u, just pass a comparison function, for example:
import _ from "lodash";
const readings= [
{
location: {
lat: '21.4',
lng: '23.5'
},
vehicle: 'sdkhf',
id:'1'
},
{
location: {
lat: '22.4',
lng: '25.5'
},
vehicle: 'sdkhf',
id:'2'
},
{
location: {
lat: '21.4',
lng: '23.5'
},
vehicle: 'sdkhf',
id:'3'
},
{
location: {
lat: '22.4',
lng: '25.5'
},
vehicle: 'sdkhf',
id:'2'
},
{
location: {
lat: '28.4',
lng: '21.5'
},
vehicle: 'sdkhf',
id:'5'
},
]
const getLocation = ({ location }) => `${location.lat}/${location.lng}`
const objGrouped = _.groupBy(readings, getLocation)
const arrayGrouped = Object.values(objGrouped)
Using #array.reduce
method
Although other answers look good with lodash
, you can easily achieve it by using .reduce()
.
The key point here is getting key
with the format.
const key = `lat.${curr.location.lat}-lng.${curr.location.lng}`
Or any format as you like. As long as it based on location.lat & location.lng
along with the key should be a string
instead of object
.
const readings = [ { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' }, { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' }, { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' }, { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' }, { location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' }, ]; var result = readings.reduce((acc, curr) => { const key = `lat.${curr.location.lat}-lng.${curr.location.lng}` acc[key]??= {[key]: []}; acc[key][key].push(curr); return acc; }, {}) console.log(Object.values(result));
The _.groupBy()
function accepts a callback that defines the key to group by. You can concatenate the lat
and lng
using a template string, and use that as the key.
const readings = [{"location":{"lat":"21.4","lng":"23.5"},"vehicle":"sdkhf","id":"1"},{"location":{"lat":"22.4","lng":"25.5"},"vehicle":"sdkhf","id":"2"},{"location":{"lat":"21.4","lng":"23.5"},"vehicle":"sdkhf","id":"3"},{"location":{"lat":"22.4","lng":"25.5"},"vehicle":"sdkhf","id":"2"},{"location":{"lat":"28.4","lng":"21.5"},"vehicle":"sdkhf","id":"5"}]; const result = _.groupBy(readings, ({ location: { lat, lng} }) => `${lat}-${lng}`); console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.