How to consume a given Json from an http address

  

I'm trying to consume a given Json from an http address, but   I do not know what's going wrong.

     

I've split the question into two groups my other doubts

   import { ComprasService } from './compras.service';

import { Compra } from './../compra/compra.model';

import { Component, OnInit } from '@angular/core';



@Component({
  selector: 'tl-compras',
  templateUrl: './compras.component.html',
  styleUrls: ['./compras.component.css']
})
export class ComprasComponent implements OnInit {


events: Compra[];

  constructor(private comprasService: ComprasService) { }

  ngOnInit() {
    this.comprasService.events().subscribe(events => this.events = events);
  }
}

import { Injectable } from '@angular/core';

    import { PRODUC_API } from '../app.api';
    import {Http} from '@angular/http';
    import {Observable} from 'rxjs/observable';
    import { Compra } from '../compra/compra.model';
    import 'rxjs/add/operator/map';


    @Injectable()
    export class ComprasService {

        constructor(private http: Http) {}

        events(): Observable<Compra[]> {
            return this.http.get('${PRODUC_API}/events').map(response => response.json());
        }

    }