What is the best way to retrieve the maximum value from an array object in Angular?

Question

What is the best way to retrieve the maximum value from an array object in Angular?

i have an array and i'm trying to return the status title from the largest id in that array using Angular. Here's a link to the image: https://i.sstatic.net/87okc.png

I've updated my code as follows:

getData(id){
    let url_detail = this.apiurl + `/${id}`;
    this.http.get<any[]>(url_detail).pipe(
        tap(data=>{
            var status = data.reduce((item, curr) => {
                return item.id < curr.id ? curr : item;
              }).status.title;
        
            return status;
        }),
        catchError(this.handleError)
    );
}

However, when I call this function like this:

console.log("status ", this.service.getData(1))

it only returns undefined. Can someone please assist me with this issue?

arrays angular typescript

Answer 1

Answer №1

Hey @Alma, just a quick tip - instead of using tap, try using map as it doesn't change the response. Also, don't forget to subscribe to the Observable that is returned by HttpClient.get in order to fetch the result. This advice pairs well with what @dork mentioned earlier.

fetchData(id){
    let url_detail = this.apiurl + `/${id}`;
    
    // Make sure to include 'return' here
    return this.http.get<any[]>(url_detail).pipe(
        // Consider using 'map' here instead
        map(data=>{
            var status = data.reduce((item, curr) => {
                return item.id < curr.id ? curr : item;
              }).status.title;
        
            return status;
        }),
        catchError(this.handleError)
    );
}

// Lastly,
this.service.fetchData(1).subscribe(res=>{
   console.log("status: ", res)
})

Answer 2

Hey @Alma, just a quick tip - instead of using tap, try using map as it doesn't change the response. Also, don't forget to subscribe to the Observable that is returned by HttpClient.get in order to fetch the result. This advice pairs well with what @dork mentioned earlier.

fetchData(id){
    let url_detail = this.apiurl + `/${id}`;
    
    // Make sure to include 'return' here
    return this.http.get<any[]>(url_detail).pipe(
        // Consider using 'map' here instead
        map(data=>{
            var status = data.reduce((item, curr) => {
                return item.id < curr.id ? curr : item;
              }).status.title;
        
            return status;
        }),
        catchError(this.handleError)
    );
}

// Lastly,
this.service.fetchData(1).subscribe(res=>{
   console.log("status: ", res)
})

Answer 3

Answer №2

To retrieve the title of the object with the highest id, you can leverage the power of the array's reduce method in JavaScript.

data.reduce((item, curr) => {
  return item.id < curr.id ? curr : item;
}).status.title;

Answer 4

To retrieve the title of the object with the highest id, you can leverage the power of the array's reduce method in JavaScript.

data.reduce((item, curr) => {
  return item.id < curr.id ? curr : item;
}).status.title;

What is the best way to retrieve the maximum value from an array object in Angular?

Answer №1

Answer №2

Similar questions

How can I use moment js to convert the current local time to a different timezone with a specified offset?

What is the process for refreshing one observable with data from another observable?

Counting duplicate values associated with the same key in a JSON array using JavaScript/NodeJS

What is a more efficient way to differentiate a group of interfaces using an object map instead of using a switch statement?

Utilize custom SCSS styling for Angular component based on specific conditions

PHP array pushing in multiple dimensions is a crucial aspect of data

The initial load of Angular OpenId Connect triggers the rendering process before the token is fully prepared

What is the best way to detect object changes in typescript?

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

Adding elements to a JSON array within a .json file using PHP - the ultimate guide!

What is the best way to store multiple arrays within an array in Python?

Storing an Array of Strings in Shared Preferences

Extract an element from an array in React if it is present

Transforming a Java calendar date into a JavaScript date by utilizing the getTimezoneOffset() method of the new Date object

What is the best way to iterate through multiple arrays using a foreach loop in PHP?

Calculate the number of distinct values in an associative array

What is the best return type to use for a TypeScript function that returns an AsyncFunction?

Array Connections

Switching out a traditional class component with a functional component within a hook to deduce properties from T

Use patchValue to assign a value and make the field inactive