how to assign response data of api get request in angular

Question

i am making a get request to an api endpoint, which sends a json object ,i want courses array from data property.but i am not able to, do not know what am oi doing wrong ,should in convert json to object .... the error is Property 'key' does not exist on type 'Object'.

here key should be equal to "data" and data is property of the json.

my component is

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { pipe } from 'rxjs';
import { map } from 'rxjs/operators'
import { C } from './c.model';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
 courses :C[]=[];
  constructor(private http:HttpClient) { }

  ngOnInit(): void {
    this.fetchCourses();
  }

  private fetchCourses() {
    this.http.get('http://127.0.0.1:3000/api/courses/')
    .pipe(map( responseData =>{
      const coursesArray = [];
        for(const key in responseData){
          if(responseData.hasOwnProperty(key)){
             if(key === "data")
             {
               coursesArray.push(...(responseData.key.courses))
             }
          }
        }
        return coursesArray
      }))
    .subscribe(responsec=>{
      this.courses=responsec;
    })
  }

}

json from api

{
    "status": "sucess",
    "numberOFResults": 5,
    "data": {
        "courses": [
            {
                "images": [],
                "tutors": [],
                "_id": "611c8899e135aa2c9cd39796",
                
          
            },
            {
                "images": [],
                "tutors": [],
                "_id": "611c8899e135aa2c9cd39794",
                "name": "arduno uno",
                
            },
            {
                "images": [],
                "tutors": [],
                "_id": "611c8899e135aa2c9cd39795",
                "name": "c/c++",
                "duration": 8,
                
            },
            {
                "images": [],
                "tutors": [],
                "_id": "611c8899e135aa2c9cd39798",
                "name": "ms office",
                "duration": 4,
               
            },
            {
                "images": [],
                "tutors": [],
                "_id": "611c8899e135aa2c9cd39797",
                "name": "web development",
                
            }
        ]
    }
}

From your response structure you can directly access courses like responseData.data.courses. — JsNgian
– JsNgian, Commented Aug 25, 2021 at 9:26

Ritesh Waghela · Accepted Answer · 2021-08-25 09:36:20Z

1

key here is of type string and you are accessing the property using . (dot). You need to access it using the bracket [] syntax.

Change this

coursesArray.push(...(responseData.key.courses))

to

coursesArray.push(...((responseData as any)[key].courses))

edited Aug 25, 2021 at 9:36

answered Aug 25, 2021 at 9:15

Ritesh Waghela

3,7272 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Suresh D Over a year ago

yes,it's working.but what was the problem befor??

Ritesh Waghela Over a year ago

You were accessing the object property using . (dot) and the key is of type string, in such cases when key is string, we need to use [] bracket syntax to access object property.

Ritesh Waghela Over a year ago

no problem, if it solved your problem, considering upvoting/accepting the answer :)

Collectives™ on Stack Overflow

how to assign response data of api get request in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related