从Angular 6中的http调用访问对象属性

时间:2018-10-19 14:27:14

标签: angular typescript http angular6

我有一个角度应用程序,该应用程序具有调用api的服务。我收到的响应是一个对象,并且我正在尝试访问该对象中的属性,但不确定如何做?

0:
attributionText: "from The American Heritage® Dictionary of the English Language, 4th Edition"
citations: []
exampleUses: []
labels: []
partOfSpeech: "prefix"
relatedWords: []
score: 0
sequence: "0"
sourceDictionary: "ahd-legacy"
text: "Variant of pleo-."
textProns: []
word: "Brylee"
__proto__: Object
length: 1
__proto__: Array

我正在尝试访问'text'属性,但不确定如何访问该属性?

random-word-service.ts

我的服务中的方法定义为:

getRandomWord() {
return this.http.get(this.singleWordUrl + this.apiKey)

}

getSingleWord(word: string) {
    return this.http.get
    (this.wordDefinitionUrl1 + word + this.wordDefinitionUrl2 + this.apiKey)
  }

random-word.ts

export interface RandomWord {
  id: number;
  word: string;
}

word-definition.ts

export interface WordDefinition {
  attributionText: string;
  attributionUrl: string;
  citations: string;
  word: string;
  partOfSpeech: string;
  sequence: string;
  text: string;
  score: number;
}

app-component.ts

callWordService() {
    this.randomWordService.getRandomWord()
      .subscribe((data: RandomWord) => {
        this.randomWord = data;
       console.log(this.randomWord.word)

        if(data) {
          this.randomWordService.getSingleWord(this.randomWord.word)
            .subscribe((data: WordDefinition) => {
            this.defintion = data;
              console.log(this.defintion)
            })
        }
      });
  }

任何帮助将不胜感激!

JSON Response

2 个答案:

答案 0 :(得分:0)

应该与您在订阅方法中访问this.randomWord.word的方式相同。 可以使用object.property访问任何对象属性。 但是,在进行临时调用的情况下,请在访问其属性之前确保对象可用。在您的情况下,可以使用response.property在您的订阅方法中访问响应对象的任何属性。

答案 1 :(得分:0)

好像您正在以数组形式获得第二个响应。因此,如果数组始终只有一个对象,则可以像下面那样访问文本对象。

if(data){
     if(data.length>0)
        {
        this.defintion = data[0];
        console.log(this.defintion.text)
       }
}