!No Error but not fetching the data from url in angular2

Question

Hi am trying to fetch some data in from json file using api url..No error showing but not fetching the data.please take a look and let me know what mistake I did

 

 

model.ts

export class SaveDetails {

constructor(public ID: string, public param1: string,public param2: string,public param3: string,public param4: string,public param5: string,public param6: string) { }

}

fetch.json class

[

{"ID": 1, "param1": "MarketMuchukunnu" },

{"ID": 2, "param2": "MarketMuchukunnu" },

{"ID": 3, "param3": "MarketThikkodi" },

{"ID": 4, "param4": "MarketKoyilothumpadi" },

{"ID": 5, "param5": "MarketetIlanjithara" },

{"ID": 6, "param6": "MarketetIlanjithara" }

]

 

 

my service

 

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

import {Http, Request, RequestMethod, Response,

RequestOptions, Headers } from '@angular/http';

import 'rxjs/add/operator/map';

import {Observable} from 'rxjs/Observable';

import {SaveDetails} from './SaveDetails';

@Injectable()

export class Uraxservice

{

private _url: string="app/MarketTwoDetails.json"

private url2: string="app/fetch.json"

constructor(private _httpurl:Http){

}

GetUraxDetails(){

return [

{"id": 1, "name": 'MarketIndia' },

{"id": 2, "name": 'MarketAustralia' },

{"id": 3, "name": 'MarketBrazil' },

{"id": 4, "name": 'MarketRussia' },

{"id": 5, "name": 'MarketUSA' }

]

}

GetDropdownTwo(){

return this._httpurl.get(this._url)

.map((response :Response) => response.json());

//.map((res:Response) => res.json());

}

//Get

getContacts(): Observable<SaveDetails[]> {

//debugger

return this._httpurl.get(this.url2)

.map(res => <SaveDetails[]>res.json())

}

//Get

//getContacts(): Observable<SaveDetails[]> {

//debugger

// return this._httpurl.get(this.url2)

// .map(res => <SaveDetails[]>res.json())

}

 

 component.ts

 

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

import { list1 } from './app.marketone';

import {Uraxservice} from './urax.service';

import {SaveDetails} from './SaveDetails';

@Component({

selector: 'my-app',

templateUrl:'../app/fetch.html',

styleUrls: ['app/app.component.css'],

providers: [Uraxservice]

})

export class AppComponent implements OnInit {

selectedlist1:list1;

listA=[]

listB=[]

public contacts: SaveDetails[];

constructor( private _uraxservice:Uraxservice){}

ngOnInit()

{

this.listA=this._uraxservice.GetUraxDetails();

this._uraxservice.GetDropdownTwo()

.subscribe(res_ofDTwo =>this.listB=res_ofDTwo);

// this.getContacts();

//Get All

}

getContacts() {

//debugger

this._uraxservice.getContacts().subscribe(

contacts => this.contacts=contacts

);

}

}

 

 html

 

<div>

<h3>fetching..!</h3>

<p>&nbsp;</p>

<table class="table table-striped" style="width: 100%;">

<tbody>

<tr><th>param1</th>

<th>param2</th>

<th>param3</th>

<th>param4</th>

<th>param5</th>

<th>param6</th></tr>

<tr *ngFor="let SaveDetails of contacts">

<tr><th>{{SaveDetails?.ID}}</th>

<th>{{SaveDetails?.param1}}</th>

<th>{{SaveDetails?.param2}}</th>

<th>{{SaveDetails?.param3}}</th>

<th>{{SaveDetails?.param4}}</th>

<th>{{SaveDetails?.param5}}</th>

<th>{{SaveDetails?.param6}}</th></tr>

</tbody>

</table>

</div>