Searching through an array to find or filter items based on multiple conditions

Here is a dataset containing various types of information:

[0: {lat: "37.829998", lng: "-122.003152", title: "Allocate", pairStatus: 1, …}
1: {lat: "37.829998", lng: "-122.003152", title: "Commission", pairStatus: 1, …}
2: {lat: "37.829998", lng: "-122.003152", title: "Aggregate", pairStatus: 1, …}
3: {lat: "37.7745586", lng: "-121.9610328", title: "Ship", pairStatus: 1, …}
4: {lat: "37.7745586", lng: "-121.9610328", title: "Ship", pairStatus: 1, …}
5: {lat: "37.7745586", lng: "-121.9610328", title: "Ship", pairStatus: 1, …}
6: {lat: "37.7745586", lng: "-121.9610328", title: "Receive", pairStatus: 1, …}
7: {lat: "37.7745586", lng: "-121.9610328", title: "Receive", pairStatus: 1, …}]

The desired output should organize the data into groups based on lat and lan coordinates along with their corresponding titles.

[0: {lat: "37.829998", lng: "-122.003152", title: "Allocate, Commission, Aggregate"}
1: {lat: "37.7745586", lng: "-121.9610328", title: "Ship, Ship, Ship, Receive, Receive"}]
angulartypescript

Answer №1

To achieve this, you can utilize the Array reduce() method. The idea is to search for elements in the accumulator, and if an item with the same latitude and longitude already exists, then concatenate the title to that existing item.

If the item doesn't exist, a new item with "lat", "lng", and "title" properties will be added to the accumulator.

let rawData = [  
  {lat: "37.829998", lng: "-122.003152", title: "Allocate", pairStatus: 1},
  {lat: "37.829998", lng: "-122.003152", title: "Commission", pairStatus: 1},
  {lat: "37.829998", lng: "-122.003152", title: "Aggregate", pairStatus: 1},
  {lat: "37.7745586", lng: "-121.9610328", title: "Ship", pairStatus: 1},
  {lat: "37.7745586", lng: "-121.9610328", title: "Ship", pairStatus: 1},
  {lat: "37.7745586", lng: "-121.9610328", title: "Ship", pairStatus: 1},
  {lat: "37.7745586", lng: "-121.9610328", title: "Receive", pairStatus: 1},
  {lat: "37.7745586", lng: "-121.9610328", title: "Receive", pairStatus: 1}
]

let finalData = rawData.reduce((acc, {lat, lng, title}) => {
  let found = acc.find((e) => {
    return lat === e.lat && lng === e.lng
  })
  
  if (found) {
     found.title = `${found.title},${title}`
  }
  else {
    acc.push({lat, lng, title})
  }
  return acc
}, [])

console.log(finalData)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for achieving server-side pagination with client-side sorting

Currently utilizing Angular Material's data grid, successfully loading data from the server side with sorting and pagination functionality. However, I am attempting to sort only the items visible on the table instead of sorting from the server side. ...

angularangular-materialangular-material-table

Tips on how to effectively unit test error scenarios when creating a DOM element using Angular

I designed a feature to insert a canonical tag. Here is the code for the feature: createLinkForCanonicalURL(tagData) { try { if (!tagData) { return; } const link: HTMLLinkElement = this.dom.createElement('link'); ...

angulartypescriptjasmine

Distilling the Essence of "Deity" in Handling Runtime Errors

Working with a client who has a unique "God" component for creating form fields can be quite challenging. The complexity arises from the fact that we are using material design for non-mobile platforms and Ionic for mobile platforms. This special component ...

angular

Angular: Utilizing httpClient to retrieve an object map and passing it as a return value in a function

I have a basic Angular application that retrieves data from a Spring-Boot backend. export class UserDto { constructor( public login: string, public password: string, ) { } } export class AuthService { private url = '....'; get ...

angulartypescript

Currently in the process of creating a carousel displaying images, I have encountered an issue stating: "An optional property access cannot be on the left-hand side of an assignment expression."

I am currently working on an Angular Image Carousel that utilizes a model to iterate through the images. However, I am encountering an error when attempting to access the first position. An error message stating "The left-hand side of an assignment expres ...

angulartypescriptangular-materialcarousel

Guide on displaying Angular 6 wildcard page for 404 errors using nginx

After successfully creating an application using Angular 6 and implementing the Angular 6 wildcard route for handling 404 errors, I encountered an issue when trying to serve the application with nginx. Despite building the app into index.html and static fi ...

angularnginx

Encountering an issue when attempting to import a non-source module from a node library while running a Typescript script

I have a script that takes input and utilizes the three.js library to apply geometric transformations to the data. I execute this script using ts-node pipeline.ts. Here is the structure of my project: ├── package-lock.json ├── package.json ├ ...

javascriptnode.jstypescriptthree.js

What role does the @Input statement in the HeroDetailComponent class serve in the Angular 2 Quickstart tutorial?

Looking at the multiple components part of the Angular 2 Quickstart tutorial, we see how a component is separated from the AppComponent to enhance reusability and testing convenience. You can try out the example live demo here. In this scenario, users ar ...

angularjstypescriptangular

What is the significance of having nodejs installed in order to run typescript?

What is the reason behind needing Node.js installed before installing TypeScript if we transpile typescript into JavaScript using tsc and run our code in the browser, not locally? ...

javascriptnode.jstypescriptangularnpm

The elements on the webpage are spilling over with content

I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...

htmlcssangularflexbox

Uploading images to an S3 bucket in base64 format using Angular 7

Within my Ionic 4 Angular 7 application, I am attempting to upload an image captured using the Cordova camera plugin. The output data from this Camera plugin is in the form of base64 image data. this.camera.getPicture(options).then((imageData) => { ...

javascripttypescriptamazon-s3file-uploadionic4

What is the best way to create a generic array and combine properties?

I have a scenario where I have two objects defined as one and two, each containing props. These objects are then stored in an array called packages. const one = { props: { num: 2 } } const two ={ props: { nam ...

typescript

What are the steps to creating an Observable class?

I am working with a class that includes the following properties: export class Model { public id: number; public name: string; } Is there a way to make this class observable, so that changes in its properties can be listened to? I'm hoping fo ...

angulartypescriptangular8angular-observable

Having an issue with TypeScript and React where the onChange event on the <select> element is only setting the previous value instead of the current value when using the useState hook

I'm currently developing a scheduling web tool. One of the key features I'm working on involves calculating the total hours between two selected times, startTime and endTime. These times are chosen via a form and stored using the useState hook: ...

javascriptreactjstypescriptonchange

I'm searching for TypeScript interfaces that can be used to define OpenAPI Json. Where can I

If you're looking to implement the OpenApi specifications for your project, there are a variety of fields and values that need to be set. For a detailed look at these specifications, you can refer to the documentation here. In an effort to streamline ...

typescripttypesopenapi

Executing JavaScript file using TypeScript code in Node.js

Is it possible to execute a JS file from TypeScript code in Node.js? One way to achieve this is by exposing the global scope and assigning values to it. For example: Global Scope (TypeScript): globalThis.names = ['Joe', 'Bob', 'J ...

javascriptnode.jstypescript

What is the proper way to eliminate the port from a URL so that the images sourced from the XAMPP database can function correctly?

I am a beginner in Angular and I am facing an issue with Angular and XAMPP. I am attempting to load images from mySQL database where I stored their destinations. The problem is that Angular is trying to access that destination through this link: https://i ...

htmlangularxampp

The power of Angular 18's new @let syntax for template rendering

The latest update from the Angular team introduces a new @let syntax in templates. As mentioned in this comment, this feature is now available in this commit, which has been rolled out in version 18.0.2. https://i.sstatic.net/0gquUMCY.png https://i.sstati ...

angularletangular18angular-control-flow

Arranging arrangements in javascript

I am dealing with objects that contain the fields id and position. const items = [{id: 11, position: 1}, {id: 12, position: 2}, {id: 13, position: 3}, {id: 14, position: 4}, {id: 15, position: 5}, {id: 16, position: 6}]; These objects represent folders st ...

javascripttypescriptalgorithm

I am searching for the RowEnter and RowLeave events in a kendo-grid for Angular 2. Where can I find them

When using an ODATA bound Kendo UI Angular 2 table, I am facing the challenge of needing to save the data that a user edits inline on a per row basis instead of per cell. If only there were RowEnter and RowLeave events available for me to achieve this. Do ...

angularevent-handlingkendo-griddatarowinline-editing