react-leaflet make multiple polyline

Question

im new in reactjs lets say i have response from backend like this

(5) [{…}, {…}, {…}, {…}, {…}]
0:{"date_time":"2015-09-23T15:07:14",
   "name":"jhon",
   "geolocation":"-12.010443, -60.871931"}
1:{"date_time":"2015-09-23T17:07:30",
   "name":"jhon",
   "geolocation":"-12.012122, -60.855441"}
2:{"date_time":"2015-09-23T17:07:45",
   "name":"jhon",
   "geolocation":"-12.014472, -60.842729"},
3:{"date_time":"2015-09-23T15:08:14",
   "name":"joe",
   "geolocation":"-12.021524, -60.813184"}
4:{"date_time":"2015-09-23T17:08:30",
   "name":"joe",
   "geolocation":"-12.026225, -60.788792"}
5:{"date_time":"2015-09-23T17:08:45",
   "name":"joe",
   "geolocation":"-12.036634, -60.768866"}

and now i want to make marker and polyline using that data. i try to make like this :

map(tracing.list, (tracing, idx) => {
              let location = []
              if (!isEmpty(tracing.geolocation)) {
                let trac = tracing.geolocation.split(",")
                let latitude = parseFloat(trac[0])
                let longitude = parseFloat(trac[1])
                location = [latitude, longitude]
                polypos.push(location)
                return (
                  <Fragment key={idx}>
                    <Marker icon={iconShow} position={location} >
                    </Marker>
                    <Polyline id={idx} positions={polypos} arrow={{ size: '12px', frequency: '50px' }} />
                  </Fragment>
                )
              }
            })

as you can see there are 2 names Jhon and Joe. it supposed to show separate polyline. but in my case all marker are connected to one polyline. how do i separate to make different polyline for each data (jhon and joe) ?

thanks for help

Answer 1

const data=[
{"date_time":"2015-09-23T15:07:14",
   "name":"jhon",
   "geolocation":"-12.010443, -60.871931"},
{"date_time":"2015-09-23T17:07:30",
   "name":"jhon",
   "geolocation":"-12.012122, -60.855441"},
{"date_time":"2015-09-23T17:07:45",
   "name":"jhon",
   "geolocation":"-12.014472, -60.842729"},
{"date_time":"2015-09-23T15:08:14",
   "name":"joe",
   "geolocation":"-12.021524, -60.813184"},
{"date_time":"2015-09-23T17:08:30",
   "name":"joe",
   "geolocation":"-12.026225, -60.788792"},
{"date_time":"2015-09-23T17:08:45",
   "name":"joe",
   "geolocation":"-12.036634, -60.768866"}
];

const reducer = (acc, cur) => {
  const item = acc.find((x) => x.name === cur.name);
  if (item) {
    item.data.push({date_time:cur.date_time,geolocation:cur.geolocation});
  } else {
    acc.push({
      name: cur.name,
      data: [{date_time:cur.date_time,geolocation:cur.geolocation}]
    });
  }
  return acc;
};

console.log(data.reduce(reducer, []));

First use something like a reducer and split the array by users. then you can do a map just like above

const array=data.reduce(reducer, []);

When you do this you get separate lines for each user.

array.map(user=>user.data.map(//your current mapping logic))