如何使用 Angular 从 API 访问嵌套属性

Question

我正在使用 Angular 从 API 获取数据。我一直在关注this youtube 视频，但没有演示访问嵌套属性。

您将如何从https://jsonplaceholder.typicode.com/users 访问“地址”属性，例如“街道”和“城市”

谢谢！

Answer 1

看到您的 API，您的数据结构具有嵌套对象，而您参考的教程仅给出了 普通对象 的示例。 p>

上述答案还建议了访问对象中嵌套属性的正确方法，但在这种情况下，我建议您以正确的方式构建对象，以便 Angular 自动正确映射您的嵌套对象。

类似的东西。

export class Location{
    public lat: string;
    public lng: string;
}
  export class Company{
      public name: string;
      public catchPhrase: string;
      public bs: string;
  }
  
  export class Address{
    public street: string;
    public suite: string;
    public city: string;
    public zipcode: string;
    public geo: Location;
}
export class User{
    public id: number;
    public name: string;
    public username: string;
    public email: string;
    public address: Address;
    public phone: string;
    public website: string;
    public company: Company;
}

这样，当您调用 http get 服务时，您会以正确的嵌套格式获取记录，以便以后访问。例如

this._http.get<User[]>(this.apiUrl);

现在您可以使用点运算符 (.) 访问 User 对象内的嵌套对象。

Answer 2

您可以使用以下代码访问它们。说propertiesList作为响应json然后

...
 const addressList = this.propertiesList.map(prop -> prop.address ? 
                      { 'street' : prop.address.street, 'city' : prop.address.city } : null );
...

您可以在索引的帮助下访问它们

const street = addressList[0].street;
const city = addressList[0].city;

Answer 3

假设你想访问数组的第一个对象。并且 API 响应被放置在一个响应变量中：

const response = data //the data received from the API
const address = response[0].address;
const street = address.street;
const city = address.city