The function `find()` will not provide any data, it will only output `undefined`

Question

The function `find()` will not provide any data, it will only output `undefined`

I am trying to extract the `s_id` field from this JSON data:

 {
        "StatusCode": 0,
        "StatusMessage": "OK",
        "StatusDescription": [
             {
                "s_id": "11E8C70C8A5D78888E6EFA163EBBBC1D",
                "s_serial": "PkMGo",
                "active": 0,
              },
             {
                "s_id": "11E8C70FB9D10DB38E6EFA163EBBBC1D",
                "s_serial": "UgooX",
                "active": 0,
                },
              {
                "s_id": "11E8C7179F85836D8E6EFA163EBBBC1D",
                "s_serial": "IiLnM",
                "active": 0,
                }, .....
            {
                "s_id": "11E8C71905123F1A8E6EFA163EBBBC1D",
                "s_serial": "LVpcP",
                "active": 0,
             }
              }]}

Despite my efforts, I am unable to find it and keep getting 'undefined'.

 sensors: Sensors[]=[];
 hbp: HBP;
 sensor: Sensors;

     this.ss.getAllS().subscribe(
          sensors => {
            this.sensors = sensors 
            let ss = this.sensors.find(x => x.s_id ===  this.hbp.s_id);
            console.log(ss)
            if (ss) {
              this.selectedSensor = ss.s_id
            }
          }
        );

In addition,

 selectedSensor : string = this.sensors.filter(
    x => x.s_id === this.sensor.s_id[0])
    .map(y => y.s_serial).join('');

I believe there is an issue with this line:

        let ss = this.sensors.find(x => x.s_id ===  this.hbp.s_id);

This may be because the `hbp` variable returns the following JSON:

active: 0
homebox_id: "11E8C71154CC8C188E6EFA163EBBBC1D"
sensors: Array(2)
0: {s_serial: "s_id", s_id: "11E8C70C8A5D78888E6EFA163EBBBC1D"}
1: {s_serial: "UgooX", s_id: "11E8C70FB9D10DB38E6EFA163EBBBC1D"}

Thus, the search might be conducted within these sensors.

The selectedSensor variable is utilized in the HTML code as follows:

<input formControlName="s_id" type="text" placeholder="Select " [(ngModel)]="selectedSensor" aria-label="Number" matInput
            [matAutocomplete]="auto">

How can I retrieve the required data?

Any suggestions or ideas would be greatly appreciated. Thank you!

angular typescript find

Answer 1

Answer №1

From my observation, your code appears to be correct. However, it is crucial to verify that the this.ss.getAllS() method is indeed returning an array of StatusDescription types. I suggest conducting a runtime check on the content of the sensors variable to ensure its accuracy.

Answer 2

From my observation, your code appears to be correct. However, it is crucial to verify that the this.ss.getAllS() method is indeed returning an array of StatusDescription types. I suggest conducting a runtime check on the content of the sensors variable to ensure its accuracy.

Answer 3

Answer №2

At first, the sensors in question will be null, making it impossible to access any properties for comparison.

To work around this issue, perform a quick null check on the sensors before proceeding with your search:

this.ss.getAllS().subscribe(sensors => {
  if (sensors) {
    this.selectedSensor = this.sensors.find(x => x.s_id === this.hbp.s_id)
  }
});

If you'd like to see an example using StackBlitz, check out: https://stackblitz.com/edit/select-id-from-observable

Answer 4

At first, the sensors in question will be null, making it impossible to access any properties for comparison.

To work around this issue, perform a quick null check on the sensors before proceeding with your search:

this.ss.getAllS().subscribe(sensors => {
  if (sensors) {
    this.selectedSensor = this.sensors.find(x => x.s_id === this.hbp.s_id)
  }
});

If you'd like to see an example using StackBlitz, check out: https://stackblitz.com/edit/select-id-from-observable

Answer 5

Answer №3

To utilize the find function, you can follow the example below:

  let ss =   this.sensors.find((item) => {
      return item.s_id === this.hbp.s_idl
    })


if (ss) {
    this.selectedSensor = ss.s_id         
      }

If you need to combine filter, map, and join operations, ensure that you are returning the item.property within the map function.

.filter((item) => {
  return item.s_id ===  ss.s_id
}).map(
  (item) => {
    return item.s_serial
  }
).join( )

Take a look at this code snippet for reference:

https://stackblitz.com/edit/arrayfind?file=index.js

Answer 6

To utilize the find function, you can follow the example below:

  let ss =   this.sensors.find((item) => {
      return item.s_id === this.hbp.s_idl
    })


if (ss) {
    this.selectedSensor = ss.s_id         
      }

If you need to combine filter, map, and join operations, ensure that you are returning the item.property within the map function.

.filter((item) => {
  return item.s_id ===  ss.s_id
}).map(
  (item) => {
    return item.s_serial
  }
).join( )

Take a look at this code snippet for reference:

https://stackblitz.com/edit/arrayfind?file=index.js

The function `find()` will not provide any data, it will only output `undefined`

Answer №1

Answer №2

Answer №3

Similar questions

The subscription data for nested classes appears to be displaying as undefined

When the local server and SPA are running on different ports, utilizing an authentication cookie can help bridge the

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

Generate an alert with a numerical input field - Ionic

What is the process for obtaining the result and storing it in an array using M

Creating a stacked chart in Angular using chart.js with JSON array of objects values

Select the implied type from a resolved Promise type in Typescript

A method to eliminate the mouse-over effect following the selection of an input box

Confirm that the user has interacted with every input

How can I showcase an image using Angular?

How can we add a key:value pair at a specific position in an array in Angular 2 using Typescript?

Ways to extract the final digit from a format such as an IP address in JavaScript

What is the process for converting an image into base 64 using Angular 5?

Using Angular 5 with Typescript to generate and return an array of freshly instantiated typed objects

When selecting the "Open Link in New Tab" option in Chrome, the Angular app's routing will automatically redirect to the login page

Implementing Express.js allows for the seamless casting of interfaces by the body within the request

A guide on connecting multiple select components to a unified Angular 6+ reactive form without triggering redundant updates

Value is not defined when subscribing to subject in Event Bus Implementation

Tips for generating a new method using an existing one

I'm having trouble with ViewChild - consider upgrading to beta7 for a solution