Home > Back-end >  Why I can't map API response to an Interface in Angular?
Why I can't map API response to an Interface in Angular?

Time:10-03

hi guys I'm trying to map some API responses from The Muse API to an APIResponseInterface I created like this:

service that sends the request:

getJobs(page: number): Observable<APIResponseInterface>{
    return this.http.get<APIResponseInterface>(this.url   page)

  }

API Response Interface

export interface APIResponseInterface {
  page?: number,
  page_count?: number,
  items_per_page?: number,
  took?: number,
  timed_out?: boolean,
  total?: number,
  results: Array<JobInterface>
}

after being received the items of the "results" should map to this interface:


export interface JobInterface {
  contents: HTMLAllCollection,
  name: string,
  type?: string,
  publication_date?: Date,
  short_name?: string,
  model_type?: string;
  id? : number,
  locations: LocationInterface[]
  level: LevelsInterface[],
  company: CompanyInterface,
}

Into My Angular component I'm using this function to map the results an array of JobInterface:

this.jobsService.getJobs(1)
      .subscribe((response) => {
        this.jobs = response.results.map<JobInterface>(job => {{
          name: job.name

          }}
        )
        console.log(this.jobs)
      })

But I get errors like:

TS2345: Argument of type '(job: JobInterface) => void' is not assignable to parameter of type '(value: JobInterface, index: number, array: JobInterface[]) => JobInterface'.

Can you please help me figuring out what I'm doing wrong? what's the correct way of doing this?

CodePudding user response:

You need to wrap the return with a parenthesis not curly braces

this.jobs = response.results.map<JobInterface>(job => ({
            name: job.name
            ...
          })

when you use curly braces you need to add a return statement.

this.jobs = response.results.map<JobInterface>(job => {
   return {
            name: job.name
            ...
          }
    }

  • Related