angular - Not able to consume external webapi service from angular2 service -
my requirement create angular2 component consume external webapi service , generate bubblechart based on data received. have created dataservice component make http request. code dataservice below
import { injectable } 'angular2/core'; import { http_providers, http, headers, response, jsonp_providers, jsonp } 'angular2/http'; import { configuration } './configuration'; import 'rxjs/add/operator/map' import { observable } 'rxjs/observable'; ///service class call rest api @injectable() export class dataservice { private dataserveractionurl: string; private headers: headers; result: object; constructor(private _http: http, private _configuration: configuration) { this.dataserveractionurl = "http://localhost:23647/api/extractorqueue/getextractorqueueslatest/"; this.headers = new headers(); this.headers.append('content-type', 'application/json'); this.headers.append('accept', 'application/json'); } public getextractorqueueslatest() { return this._http.get(this.dataserveractionurl) .map(response => response.json()) .subscribe((res) => { this.result = res; console.log(this.result); }, (err) => console.log(err), () => console.log("done") ); } the code creating bubblechart component below: facing issues while trying fetch data returned getextractorqueueslatest() method.
import { http_providers, http, headers, response, jsonp_providers, jsonp } 'angular2/http'; import { component, oninit } 'angular2/core'; import { core_directives } 'angular2/common'; import { dataservice } '../dataservice'; declare var d3: any; @component({ //selector: 'bubble-chart', styles: [``], directives: [core_directives], providers: [dataservice], //template: `` templateurl:'bubblechart.html' }) export class bubblechartcomponent implements oninit { public resultdata: any; _http: http; private headers: headers; constructor(private _dataservice: dataservice) { } ngoninit() { this._dataservice .getextractorqueueslatest().subscribe(res => this.resultdata = res); error => console.log(error), () => console.log('extractor queues latest')); this.drawbubblechart(); } margin = 25; diameter = 915; color = d3.scale.linear() .domain([-1, 5]) .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) .interpolate(d3.interpolatehcl); pack = d3.layout.pack() .padding(2) .size([this.diameter - this.margin, this.diameter - this.margin]) .value(function (d) { return d.size; }) svg = d3.select("router-outlet").append("svg") .attr("width", this.diameter) .attr("height", this.diameter) .append("g") .attr("transform", "translate(" + this.diameter / 2 + "," + this.diameter / 2 + ")"); private drawbubblechart(): void { var chart = d3.json(this.resultdata, (error, root) => { if (error) throw error; var focus = root, nodes = this.pack.nodes(root), view; var circle = this.svg.selectall("circle") .data(nodes) .enter().append("circle") .attr("class", function (d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) .style("fill", (d) => { return d.children ? this.color(d.depth) : null; }) .on("click", (d) => { if (focus !== d) zoom.call(this, d), d3.event.stoppropagation(); }); var text = this.svg.selectall("text") .data(nodes) .enter().append("text") .attr("class", "label") .style("fill-opacity", function (d) { return d.parent === root ? 1 : 0; }) .style("display", function (d) { return d.parent === root ? "inline" : "none"; }) .text(function (d) { return d.name; }); var node = this.svg.selectall("circle,text"); d3.select("router-outlet") .style("background", this.color(-1)) .on("click", () => { zoom.call(this, root); }); zoomto.call(this, [root.x, root.y, root.r * 2 + this.margin]); function zoom(d) { var focus0 = focus; focus = d; var transition = d3.transition() .duration(d3.event.altkey ? 7500 : 750) .tween("zoom", (d) => { var = d3.interpolatezoom(view, [focus.x, focus.y, focus.r * 2 + this.margin]); return (t) => { zoomto.call(this, i(t)); }; }); transition.selectall("text") .filter(function (d) { return d.parent === focus || this.style.display === "inline"; }) .style("fill-opacity", function (d) { return d.parent === focus ? 1 : 0; }) .each("start", function (d) { if (d.parent === focus) this.style.display = "inline"; }) .each("end", function (d) { if (d.parent !== focus) this.style.display = "none"; }); } function zoomto(v) { var k = this.diameter / v[2]; view = v; node.attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }); circle.attr("r", function (d) { return d.r * k; }); } }); } } the problem facing external webapi service method not being called. not sure mistake have done here in code, can 1 please guide me on , correct mistakes?
you're subscribing in getextractorqueueslatest() method. should rewrite return observable , subscribe in ngoninit() of component.
also think should move this.drawbubblechart() call subscribe lambda function, doesn't called early.
in service:
public getextractorqueueslatest() { return this._http.get(this.dataserveractionurl) .map(response => response.json()); } in component:
ngoninit() { this._dataservice.getextractorqueueslatest() .subscribe( (res) => { this.resultdata = res; this.drawbubblechart(); }, (error) => console.log(error), () => console.log('extractor queues latest') ); }
Comments
Post a Comment