Sujeet Raman

Sujeet Raman

  • 793
  • 915
  • 330.6k

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

Apr 19 2017 2:01 AM
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>
 
 
 

Answers (1)