Home:ALL Converter>Angular - Unable to fetch data from api

Angular - Unable to fetch data from api

Ask Time:2018-06-27T00:15:32         Author:Rishav

Json Formatter

Error:

GET https://od-api.oxforddictionaries.com/api/v1/entries/en/hi 403 (Forbidden).

xyz.service.ts

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from "@angular/common/http";
import {Http, Response} from '@angular/http';
import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
providedIn: 'root'
})
export class XyzService {

   word: String = "aardvark";
   constructor(private _http: HttpClient) {}
   private handleError(err: HttpErrorResponse) {
   console.log(err.message);
   return Observable.throw(err.message);
  }
   getDictonaryData(name?): any {
       if(name){
          this.word = name
      }

  let headers = new HttpHeaders();
  headers.append('Accept','application/json');
  headers.append('app_id','4e**91');
  headers.append('app_key','7d0740a128b****843d6f');

  let myResponse = this._http.get('https://od- 
  api.oxforddictionaries.com/api/v1/entries/en/'+this.word,{headers:headers
 });
  return myResponse;

  }
 }

app.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { XyzService } from './xyz.service';
 import { HttpClient } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
name:string;
dictData:any;


 constructor(private _route: ActivatedRoute, private router: Router, private 
xyzService: XyzService, ) {}

 getData() {
  this.xyzService.getDictonaryData(this.name).subscribe(
    data => {

        this.dictData = data;
          console.log(this.dictData);
          } ,

      error => {
          console.log("some error occured");
          console.log(error.errorMessage);
      }
   );

  }}

app.component.html

<input id="name" type="text" [(ngModel)]="name"/>
<button (click)="getData()"> Get Data </button>

<div class="row" *ngIf="dictData">
<h2>{{dictData["results"][0]["lexicalEntries"][0]["entries"][0]["senses"][0] 
["definitions"]}}

</h2>
</div>

Earlier I was also getting one more error

'No Access-Control-Allow-Origin header is present on the requested resource'.

But after I included 'Moesif Origin & CORS Changer'extension , this error has gone . But still I am getting another Error:

GET https://od-api.oxforddictionaries.com/api/v1/entries/en/hi 403 (Forbidden).

Author:Rishav,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/51047377/angular-unable-to-fetch-data-from-api
yy