CODEWITHSUNDEEP
jsonangularapiangular7
Deepak007
Deepak007

Reputation: 9

Unable to Parse JSON data in angular requested through API

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

Upvotes: 0

Views: 683

Answers (2)

codedawi
codedawi

Reputation: 314

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)}
     )

  }

}

Upvotes: 1

TheParam
TheParam

Reputation: 10541

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!

Upvotes: 1

Related Questions