Angular 4 Http GET method is not working on localhost(127.0.0.1) to get JSON data

[admin]

I am trying to get JSON data from my local server that is 127.0.0.1 by using Angular 4 services, but I can't get them to my Angular App. <a href="

https://imgur.com/TBGvU

" rel="nofollow noreferrer">I got this error</a>.
<a href="

https://imgur.com/Kts9s

" rel="nofollow noreferrer">this is my JSON data on 127.0.0.1</a>

Note: I used XAMPP for my server [localhost (127.0.0.1)]

This is my app.component.ts

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';

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

constructor(private http: Http){}
ngOnInit()
{
this.http.get('http://127.0.0.1/wordpress/getdata.php?Name=json')
.subscribe(
 (res: Response)=>
 {
  const name = res.json();
  console.log("This is the response", name);
 }
 )
 }
 }

This is app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { HttpModule } from '@angular/http';

 @NgModule({
 declarations: [
  AppComponent
 ],
imports: [
 BrowserModule,
 HttpModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }