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

Question

当我尝试访问数组时 returns 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

Answer 1

您的日期变量似乎不是数组。它是一个对象，其属性 (content 属性) 包含一个数组。您期望：

dates:Array<Calendar>

实际是什么：

dates: {
  content: Array<Calendar>
}

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

Answer 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 数据的“循序渐进”展示对您有所帮助。

Answer 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;

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

Can't go through the array object received from the service but I can see its content

arrays

service

return-type

typescript

angular