How to access array elements in angular

Question

From an API, I'm trying to get data using httpModule. Here is my code

async searchMeaning(form: NgForm) {

    const post = {
      word: form.value.inputWord,
      language: form.value.language
    }
    console.log(post);
    if (post.language && post.word) {
       this.output1 = await this.callApi(post); // it displays await has not effect
       console.log(this.output1) // undefined.
    }
  }

   callApi(post) {
    this.http.get('https://api.dictionaryapi.dev/api/v2/entries/'+post.language+'/'+post.word)
    .subscribe((data) => {
      console.log(JSON.parse(JSON.stringify(data)));
      return data;
      
    }, (error : any) => {
      return error
    })
  }

When I use async and await, it says that await has no effect. An undefined is getting assigned to the variable this.output. How can I make this work? Also, How can I get access to a variable from the below response array?

[
    {
        "word": "hello",
        "phonetics": [
            {
                "text": "/həˈloʊ/",
                "audio": "https://lex-audio.useremarkable.com/mp3/hello_us_1_rr.mp3"
            },
            {
                "text": "/hɛˈloʊ/",
                "audio": "https://lex-audio.useremarkable.com/mp3/hello_us_2_rr.mp3"
            }
        ],
        "meanings": [
            {
                "partOfSpeech": "exclamation",
                "definitions": [
                    {
                        "definition": "Used as a greeting or to begin a phone conversation.",
                        "example": "hello there, Katie!"
                    }
                ]
            },
            {
                "partOfSpeech": "noun",
                "definitions": [
                    {
                        "definition": "An utterance of “hello”; a greeting.",
                        "example": "she was getting polite nods and hellos from people",
                        "synonyms": [
                            "greeting",
                            "welcome",
                            "salutation",
                            "saluting",
                            "hailing",
                            "address",
                            "hello",
                            "hallo"
                        ]
                    }
                ]
            },
            {
                "partOfSpeech": "intransitive verb",
                "definitions": [
                    {
                        "definition": "Say or shout “hello”; greet someone.",
                        "example": "I pressed the phone button and helloed"
                    }
                ]
            }
        ]
    } ]

here I need to get the value of the definition variable from the above array. How can I do that?

console image

Your callApi() method is not returning anything. You could return this.http.get(..., but you should delete the subscribe orelse you'll be returning a Subscription. And then subscribe to the observable when you call callApi(). — Isaac
– Isaac, Commented Apr 4, 2021 at 16:27

ShamPooSham · Accepted Answer · 2021-04-04 19:33:41Z

When I use async and await, it says that await has no effect.

Yes, that's because await only has an effect on Promises (a type native to Javascript). this.callApi(post) returns a Subscription (which is a RxJS type), which isn't the same as a Promise.

In Angular, I'd argue that using Promises is an antipattern (unless required by a third party library). Instead you should use Observables and subscribe to them, which you'll find out later has a tons of advantages in more complex situations. The way you usually do this is by building up observables with pipes as far as possible, and then subscribe when you actually need to do the call, like this:

searchMeaning(form: NgForm) {

    const post = {
      word: form.value.inputWord,
      language: form.value.language
    }
    console.log(post);
    if (post.language && post.word) {
       this.callApi(post).subscribe(x => {
           this.output1 = x;
           console.log(this.output1); // shouldn't be undefined anymore
           // if you want to do more to
           // affect the state of the component, 
           // you can do it here
       });
       // Be cautious, things that you write here will actually execute before the call to the API.
    }
  }

   callApi(post) {
    this.http.get('https://api.dictionaryapi.dev/api/v2/entries/'+post.language+'/'+post.word)
    .pipe(map(x => {
         // if you want to change x in some way 
         // before returning to the calling method, 
         // you can do it here
         return x;
     }));
  }

Also, How can I get access to a variable from the below response array?

For example, if you want to access the first definition example, you could do the following: x[0]["meanings"][0]["definitions"][0]["example]. You could also make a type definition to make it even easier to access, but it's probably not worth it if you're just using the dictionary for a few things.

It can be worthwhile to look through the Angular docs on Observables, or at least look at the concrete use cases with calling APIs with HttpClient

Get Off My Lawn · Accepted Answer · 2021-04-04 13:34:12Z

1

You should return an observable from callApi() then you can use await on your function:

callApi(post) {
  const sub = new Subject();
  this.http.get('https://api.dictionaryapi.dev/api/v2/entries/'+post.language+'/'+post.word)
    .subscribe((data) => {
      console.log(JSON.parse(JSON.stringify(data)));
      sub.next(data)
      sub.unsubscribe();
    }, (error : any) => {
      sub.error(data);
      sub.unsubscribe();
    })

  return sub.asObservable();
}

this.output1 = await this.callApi(post).pipe(first()).toPromise();

If you don't want to use .pipe(first()).toPromise(), then you need to have callApi return a Promise.

Also, depending on what you want callApi to do, you could just return this.http.get() or even this.http.get().pipe(first()).toPromise().

edited Apr 4, 2021 at 13:34

answered Apr 4, 2021 at 13:29

Get Off My Lawn

36.6k47 gold badges201 silver badges380 bronze badges

2 Comments

BizzyBob Over a year ago

Introducing a subject seems overly complicated. Why not just return http.get().pipe(tap(data => console.log(...)))

ShamPooSham Over a year ago

This solution works, but I'd argue that using toPromise when there's no need to is an anti-pattern in Angular. Try using observables all the way and then subscribe/unsubscribe.

Collectives™ on Stack Overflow

How to access array elements in angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related