Unable to Parse JSON data in angular requested through API

Question

I am trying to get the data of movie from imdb site with the help of an API but unable to process the data further.

Here is the link i pass ("https://sg.media-imdb.com/suggests/j/johnwick.json") in the get method and opening the browser it looks like this:

imdb$johnwick({
  "v": 1,
  "q": "johnwick",
  "d": [
    {
      "l": "John Wick: Chapter 3 - Parabellum",
      "id": "tt6146586",
      "s": "Keanu Reeves, Ian McShane",
      "y": 2019,
      "q": "feature",
      "vt": 5,
      "i": [
        "https://m.media-amazon.com/images/M/MV5BNDU3YzJlY2EtODA3NS00ZWM3LWJhYjUtZWE3MmE2YmEzNWYwXkEyXkFqcGdeQXVyNDMzMzI5MjM@._V1_.jpg",
        4050,
        6000
      ],
      "v": [
        {
          "l": "Official Trailer",
          "id": "vi3978017305",
          "s": "2:18",
          "i": [
            "https://m.media-amazon.com/images/M/MV5BNTg2YzEyNjktMmRmZi00NjU4LWIxNzYtMGE0Y2U2MDI5Y2Q1XkEyXkFqcGdeQW1yb3NzZXI@._V1_.jpg",
            1920,
            1080
          ]
        }
      ]
    },
    {
      "l": "John Wick",
      "id": "tt2911666",
      "s": "Keanu Reeves, Michael Nyqvist",
      "y": 2014,
      "q": "feature",
      "vt": 23,
      "i": [
        "https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_.jpg",
        1365,
        2048
      ],
      "v": [
        {
          "l": "Trailer #2",
          "id": "vi2273816345",
          "s": "1:00",
          "i": [
            "https://m.media-amazon.com/images/M/MV5BMjU0OTQwMjUyN15BMl5BanBnXkFtZTgwODQ5OTE4MjE@._V1_.jpg",
            640,
            480
          ]
        },
        {
          "l": "Clip",
          "id": "vi3905924889",
          "s": "0:29",
          "i": [
            "https://m.media-amazon.com/images/M/MV5BNDYwMTUwNTMyNF5BMl5BanBnXkFtZTgwNDcyMjExMzE@._V1_.jpg",
            1280,
            720
          ]
        },
        {
          "l": "John Wick",
          "id": "vi2809377049",
          "s": "4:18",
          "i": [
            "https://m.media-amazon.com/images/M/MV5BNGQ1YjYwOTUtODRkOS00NjU3LWJjZTMtOWM1MWE2YmFiN2ZjXkEyXkFqcGdeQXVyNzU1NzE3NTg@._V1_.jpg",
            480,
            360
          ]
        }
      ]
    },
    {
      "l": "John Wick: Chapter 2",
      "id": "tt4425200",
      "s": "Keanu Reeves, Riccardo Scamarcio",
      "y": 2017,
      "q": "feature",
      "i": [
        "https://m.media-amazon.com/images/M/MV5BMjE2NDkxNTY2M15BMl5BanBnXkFtZTgwMDc2NzE0MTI@._V1_.jpg",
        1328,
        2048
      ]
    },
    {
      "l": "John Williams",
      "id": "nm0002354",
      "s": "Music Department, Star Wars: Episode I - The Phantom Menace (1999)",
      "i": [
        "https://m.media-amazon.com/images/M/MV5BMjY5MTgzMTQ1NF5BMl5BanBnXkFtZTYwNDg3OTcz._V1_.jpg",
        280,
        400
      ]
    },
    {
      "l": "John Witherspoon",
      "id": "nm0936762",
      "s": "Actor, Friday (1995)",
      "i": [
        "https://m.media-amazon.com/images/M/MV5BMTM2NTg4MDcxNV5BMl5BanBnXkFtZTYwMDAxMzY0._V1_.jpg",
        317,
        400
      ]
    },
    {
      "l": "John Williams",
      "id": "nm0002369",
      "s": "Actor, Sabrina (1954)",
      "i": [
        "https://m.media-amazon.com/images/M/MV5BMTUyNDg1MTU5MV5BMl5BanBnXkFtZTcwMTgwNTUxOA@@._V1_.jpg",
        1107,
        1426
      ]
    },
    {
      "l": "John Wilder",
      "id": "nm0928588",
      "s": "Writer, Centennial (1978-1979)",
      "i": [
        "https://m.media-amazon.com/images/M/MV5BMjAxNjE0NzE1MV5BMl5BanBnXkFtZTcwNzUzNjI0NA@@._V1_.jpg",
        473,
        650
      ]
    },
    {
      "l": "John Wick Chapter 2: Wick-vizzed",
      "id": "tt7161870",
      "s": "Pedro Hollywood, J.J. Perry",
      "y": 2017,
      "q": "video",
      "i": [
        "https://m.media-amazon.com/images/M/MV5BNDNkZDI0MjktMmZiYS00ZjI4LWI3ZDctMTBhMTMyYjczMDhlXkEyXkFqcGdeQXVyODA1NjQ0OTY@._V1_.jpg",
        2000,
        3000
      ]
    }
  ]
})

Here is my angular code (The service file):

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  storeMovie: any[];
  constructor(private http: HttpClient) { }

   getmovies(): Observable<any>
   {
     return this.http.get('https://sg.media-imdb.com/suggests/j/johnwick.json');
   }
}

The below code is the file getting served:

import { Component, OnInit } from '@angular/core';
import { MovieProviderService } from '../movie-provider.service';

@Component({
  selector: 'app-movie-container',
  templateUrl: './movie-container.component.html',
  styleUrls: ['./movie-container.component.scss']
})
export class MovieContainerComponent implements OnInit {

  constructor(private movieService: MovieProviderService) { }

  ngOnInit() {
     let obs = this.movieService.getmovies();
     obs.subscribe(
       (response)=>{
         const data = response.json();
         console.log(data);},
       (error)=>{console.log(error)}
     )

  }

}

It is giving the parsing error on console of chrome like unable to parse JSON at position 0...

I can see that the JSON data is contained inside imdb$johnwick( JSON ). How to get rid of that or may be tell some other good way or some topics which i need to learn. THANKYOU

The Json is inside that function , how to get it!! Can you help me out? — Deepak007
– Deepak007, Commented Mar 10, 2019 at 7:51

TheParam · Accepted Answer · 2019-03-10 08:08:12Z

IMDB return data in JSONP format so here you need to import HttpClientModule and HttpClientJsonpModule into your module.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// Import relevant http modules
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { ExampleService } from './example.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Import relevant http modules
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [ExampleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

model-provider.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  storeMovie: any[];
  constructor(private http: HttpClient) { }

   getmovies(): Observable<any>
   {
     return this.http.jsonp('https://sg.media-imdb.com/suggests/j/johnwick.json', 'callback');
   }
}

Hope this will help!

codedawi · Accepted Answer · 2019-03-10 08:34:54Z

In the service.js pass the option to handle the response as "text". We want to handle the reformatting of the text response in the service so we do not need to account for this in every component.

Using /(?:^.*?(\{)|\)$)/gm replaces everything before the first { and the ending ). The gm is "global" and "multi-line" for matching and will only replace the text if these rules are matched. We will then replace with first capture group of the RegExp (if there is no capture group one $1 becomes a blank string).

I took this approach to ensure if the source passes valid JSON in the future we wont be breaking/replacing valid JSON.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  storeMovie: any[];
  constructor(private http: HttpClient) { }

   getmovies(): Observable<string>
   {
         return this.http.get('https://sg.media-imdb.com/suggests/j/johnwick.json', { responseType: 'text' })
               .map((res) => {
                  return JSON.parse(res.replace(/(?:^.*?(\{)|\)$)/gm, "$1"));
               });
   }
}

import { Component, OnInit } from '@angular/core';
import { MovieProviderService } from '../movie-provider.service';

@Component({
  selector: 'app-movie-container',
  templateUrl: './movie-container.component.html',
  styleUrls: ['./movie-container.component.scss']
})
export class MovieContainerComponent implements OnInit {

  constructor(private movieService: MovieProviderService) { }

  ngOnInit() {
     let obs = this.movieService.getmovies();
     obs.subscribe(
       (response)=>{
         const data = response; // no longer need to call .json()

         console.log(data);},
       (error)=>{console.log(error)}
     )

  }

}

Collectives™ on Stack Overflow

Unable to Parse JSON data in angular requested through API

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related