无法通过从服务接收到的数组对象，但我可以看到它的内容答案

【问题标题】：Can't go through the array object received from the service but I can see its content无法通过从服务接收到的数组对象，但我可以看到它的内容
【发布时间】：2021-12-30 19:42:32
【问题描述】：

当我尝试访问数组时，它返回undefined。就好像我收到的内容在另一个元素中，因为在控制台中，数组不是直接访问的，而是您必须打开一个选项卡才能看到它。 Console.logs

查看 Postman 上的 json 响应：
json response

这是组件的代码：

  fetchHolidays(){
    this.calendarService.fetchDates(this.year)
    .subscribe((dates)=>{
      console.log(dates);
      console.log(dates.length);
      console.log(dates[0]);
      this.holidays=dates;
      this.updatedVariables=true;
    }, (err) => {
      console.log(err)
      //this.holidays=[];
    }
    );
  }

这是模型日历的代码：

export class Calendar{
    public date: string= '';
    public type: TypeDate = new TypeDate; 
}

export class TypeDate{
    public id: number = 0;
    public descripcion: String = ''; 
}

这是我的服务代码：

public fetchDates(year: number): Observable<Calendar[]>{
    const url = `${this.baseUrl}${year}`;
    return this.httpClient.get<Calendar[]>(url);
}

我尝试通过更改模型来提取数据：

export class ContentCalendar{
    public calendar: Calendar[]=[];
}

export class Calendar{
    public date: string= '';
    public type: TypeDate = new TypeDate; 
}

export class TypeDate{
    public id: number = 0;
    public descripcion: String = ''; 
}

在我的组件中：

  fetchHolidays(){
    this.calendarService.fetchDates(this.year)
    .subscribe((contentCalendar)=>{
      console.log(contentCalendar);
      console.log(contentCalendar['calendar'][0]['date'])
      console.log(contentCalendar.calendar[0].date);

错误是Cannot read properties of undefined (reading '0') Console object information

【问题讨论】：

标签： arrays angular typescript service return-type

【解决方案1】：

似乎您的日期变量不是数组。它是一个对象，其属性（内容属性）包含一个数组。你期望：

dates:Array<Calendar>

实际上是什么：

dates: {
  content: Array<Calendar>
}

简单地说，你应该dates.content.length 或dates.content[0]，你可能忽略了。

【讨论】：

【解决方案2】：

根据您的图像，当您执行此操作时：

.subscribe((dates)=>{....

你真正在做的是：


.subscribe( (dates: Calendar[])=>{

因此，当您尝试执行 this.holidays=dates; 时，假期也应该是 Calendar[] 类型。

总结一下，日期类似于这个数组：

[ 
   {  
      date:"01/01/2021",
      type: {
               id: 1,
               descripcion: "Some text like first date or wahtever..."
            }
   },
   {  date:"01/06/2021",
      type: {...}
   },
....
];

因此，例如，如果您声明 const firstElement = dates[0]; ，那么 firstElement 将是：

 {  
      date:"01/01/2021",
      type:  {
               id: 1,
               descripcion: "Some text like first date or wahtever..."
             }
 }

所以你可以访问字段日期，做这样的事情：

const myFirstItem = dates[0];
const myFirstItemDate = myFirstItem?.date;
const myFirstItemId = myFirstItem?.type?.id;
const myFirstItemDescription = myFirstItem?.type?.descripcion;

我希望这个关于如何提取 API 响应 Json 数据的“分步”展览对您有所帮助。

【讨论】：

对不起，我没有提供我应该提供的所有信息，感谢您的解释，但我已经尝试过了。我认为模型不适合 json。

【解决方案3】：

看起来我是在询问模型接口的作用。我已经像上一个模型一样创建了一个界面，并且已经能够访问数据。我把界面的例子留在这里：

export interface Holidays {
    content: Content[];
}

export interface Content {
    date: string;
    type: Type;
}

export interface Type {
    id:          number;
    description: string;
}

我也把请求的例子留给服务和console.log：

  fetchHolidays(){
    this.calendarService.fetchDates(this.year)
    .subscribe((holidays)=>{
      console.log(holidays.content[1].date);
      this.updatedVariables=true;

【讨论】：