looking for some solutions? You are welcome.

SOLVED: Unable to Parse JSON data in angular requested through API

Deepak007:

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



Posted in S.E.F
via StackOverflow & StackExchange Atomic Web Robots
Share:

No comments:

Recent