The Array Find method in TypeScript does not always provide the accurate result

I am working with a list of data containing various attributes like latitude, longitude, title, and pair status.

[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, …}]
  
 var getAutoRow;
 getAutoRow = this.latlist.find(fetch => fetch.lat== lat);

My requirement is to extract specific data based on the selected lat from the list:

[0: {lat: "37.829998", lng: "-122.003152", title: "Commission"}]

It's important that I can’t pass the title attribute. Can you assist me in retrieving the specific data using the lat value and index?

arraysangulartypescriptfind

Answer №1

If you need to filter an array based on a specific condition, you can utilize the filter method in JavaScript. This function will create a new array that meets your specified criteria.

Remember to always use === for value comparisons in JavaScript.

let data= [{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}];
 //console.log(data)
 let lat = '37.7745586';
 const getAutoRow = data.filter(fetch => fetch.lat === lat);
  console.log(getAutoRow)

** Update :

This is the implementation in Angular:

in component.html:

<input type="text" list="latList" name="latitude" [(ngModel)]='result' (change)="getValues(result)" />
     <datalist id="latList">
       <select>
        <option *ngFor="let product of data" [value]="product.lat"></option>
       </select>
     </datalist>
<input type="button" id="sub" (click)="getResult()" value="sub"/>

In component.ts file, add the following method when the button is clicked:

getResult(){

   this.selectedLat = this.data.filter((item)=>{
        return item.lat === this.result
   })

}

Here is the working demo: Demo

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

Identifying Scroll Behavior in Ionic 4

I'm trying to figure out how to detect upwards scrolling using the following code: <ion-infinite-scroll (ionInfinite)="doInfinite($event)" scrollY="true"> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infin ...

angularscrollionic4direction

``There are problems with parsing JSON data due to the error message indicating the presence of unexpected

I am encountering an issue with displaying values from objects stored as string[] in appwriteDB. When trying to use *ngFor to iterate through the data, I faced difficulties. Despite attempting to convert the orderItems using JSON.parse(), the process faile ...

angulartypescriptionic-frameworkappwrite

Angular 7 CLI throwing an error when generating a component: 'Unable to locate property 'sourceRoot' due to undefined value'

Encountered this error while attempting to run the command in CLI: ng generate component [component-name] An error kept popping up: Cannot read property 'sourceRoot' of undefined It seems like the error started happening after I updated my An ...

angularcomponentscommand-line-interfaceangular7generate

TSLint now requires promises to be handled correctly using the `finally` clause

Encountering an error from TSLint, I am working to comprehend why it is raising concerns. In my code, there is a function that calls another method which returns a promise. However, the initial function does not return the promise; instead, it waits for c ...

typescriptqtslint

The issue of why iterating over an array of objects does not function properly in React JS

P.S: I have made some modifications to the code below. Extracting the doctor's value from JSON data, updating the state, and then mapping it to print out the values. Initially, there is only one doctor, but in the future, there could be more than one ...

javascriptreactjsarraysobjectarray.prototype.map

Discovering the Absent Elements within a specified sequence array list using java

1. I have an Integer array list with a specified starting element and limit, for example [5,6,9,10]. 2. My task is to iterate through the list and identify any missing elements along with their positions. For instance, based on the given example, the outp ...

javaarraysarraylist

Developing original data from an array in JavaScript

I am looking to create an API body for use in JavaScript fetch. The array contains around twenty items and I need to iterate through it using a loop. Here is an example of my array of objects: [ { name:"x",lname:"y" }, { name:" ...

javascriptarraysjsonapipostman

Creating a Jira-inspired table layout in Angular by embedding components in a structured format

I'm attempting to recreate the functionality of Jira where I can create a "gadget" that can be added to a board, resized, moved, and deleted. (For those unfamiliar with why this might be useful, think of gadgets like the "Gantt" gadget. You can add a ...

htmlcssangular

Using Excel VBA to extract data from a JSON string and populate cells with the corresponding key:value pairs

I am facing a dilemma with my Excel spreadsheet setup which includes columns: | A | B | C | D | | Job number | Status | Actual Hrs | % Complete | 1___|____________|________|____________|____________| 2___|___________ ...

arraysjsonexcelvbaparsing

Is it possible to alter the data type of a property in a third-party React component?

I am currently working on a component that is functioning properly, but one of the props is designated as type "string" and I would like to either pass a component or change the data type to "any." Is there a way to accomplish this? For clarification, my ...

reactjstypescript

Step-by-step guide to exporting array data to an Excel file (CSV) using Objective C

Currently, I am facing an issue while trying to export array data into an Excel file (which is actually a CSV file opened in Excel). Below is the code snippet I am using for this purpose: NSMutableArray *list; list = [[NSMutableArray alloc] init]; NS ...

iosobjective-carraysexcelexport-to-csv

Accessing the column values of a specific row in a fetched array without the need for looping

I'm currently working with a table of news items that contains fields for title, content, date, and source, along with a primary index. I've been able to successfully retrieve the title for the first row item using $newsrow['title'], bu ...

phpsqlarrays

What is the best way to pass a multidimensional table from a C function to Lua?

I am trying to send a table back to Lua in the following format: { [0] = { ["field1"] = "1", ["field2"] = "2" , ["field3"] = "3" }, [1] = { ["field1"] = "10" , ["field2"] = "20", ["field3"] = "30" } } From a C perspective, I need to accomplish th ...

carrayslualua-table

Issue with ngmodel causing placeholder in Angular 2 md-input to not move up

While working with Angular Material to style an input field, I noticed that the placeholder does not move up when there is a value in the input. This behavior occurs only when using ngModel to bind the input. Interestingly, clicking on the input causes the ...

angularangular-material2

Exceeding the bounds of the array

Is there a way to detect and prevent accessing character arrays beyond their limits in C++? For example, if I have two character arrays of size 100 each (char array1[100], char array2[100]), how can I ensure that no one is trying to access memory beyond th ...

c++arrays

Can a Typescript type alias be altered in real time?

Currently, I am developing an Angular library that will function as an API client. The challenge I am facing is that some of the applications utilizing this library are configured with an HttpInterceptor to automatically transform date strings into JavaScr ...

angulartypescripttype-narrowing

Encountered an issue where property scrollToBottom is unable to be read of null upon returning to

Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.14 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.47 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 7 ...

typescriptionic-frameworkionic2scrollto

Issue with side panel not closing when clicked outside on IOS devices using Angular 6

On all devices except for IOS, the layout side panel is closing when clicking on the DOM: @ViewChild('closeContainer') LeftMenuObj; @HostListener('document:click', ['$event']) clickedOutside($event) { if (this.L ...

angular

I encountered an issue when trying to submit multiple forms to the database using Angular, as it was preventing me from doing

I'm currently working on an application that utilizes Angular and WebAPI (Swagger). I've encountered an issue where I can only submit my form into the database once successfully. If I try to submit it multiple times without changing the Id key in ...

angularentity-frameworkasp.net-web-apifrontendbackend

Preventing Page Refresh when Button is Clicked in Angular

How can I prevent page reload when a button is clicked in Angular? I'm developing a quiz application in Angular where I fetch random questions and options from an API. When users select an option, the next question should appear without reloading the ...

javascripthtmlangularreload