HTTP GET Request in Angular 7 returning Error (status 200)

Question

I believe that I am getting an object back from the wikimedia API, however can't figure out how I can parse it to display.

//app.component.ts

import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Post } from './post';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Wiki Search';
  // readonly ROOT_URL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=japan&origin=*&format=json';
  readonly ROOT_URL = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry Potter&origin=*&callback=JSON_CALLBACK';
  // https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search&origin=*&gsrsearch=japan"


  posts: Observable<any>;

  constructor(private http: HttpClient) {}

  getPosts(){
    this.posts = this.http.get(this.ROOT_URL)
  }
}

//app.component.html
<input type="text" placeholder="Search for pages..">
<button (click)="getPosts()">Get Posts</button>
<div *ngFor="let post of posts | async">
 {{ post | json }}
</div>

<ul class=filter-select>
  <li class="filter-select-list">
    <p class="wiki-page"></p>
  </li>
</ul>

If I insert responseType: text into the response handler, I am able to read the returned data as an error in dev console.

Saharsh · Accepted Answer · 2019-03-26 23:49:34Z

1

the URL you are calling ends with a queryString parameter callback=JSON_CALLBACK

https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry%20Potter&origin=*&callback=JSON_CALLBACK

This is wrapping the JSON in a callback method called JSON_CALLBACK, which is not a valid JSON and wouldn't allow parsing. I tried without that queryString parameter and the response is now a valid, pure JSON, which you should be able to parse

https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry%20Potter&origin=*

answered Mar 26, 2019 at 23:49

Saharsh

7607 silver badges18 bronze badges

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

1 Comment

Ranson Namba Over a year ago

Sorry my question is more how to I parse the return value, accidentally left the JSON_CALLBACK in. Making the GET in Postman returns valid JSON, however when I'm making the call in angular I get either a ERROR: Cannot find a differ supporting object '[object Object]' of type 'object'. Or the ERROR: Status code 200. I've read that it's most likely due to non JSON being passed back, but all I can see is valid JSON.

Collectives™ on Stack Overflow

HTTP GET Request in Angular 7 returning Error (status 200)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related