74697

Undefined varibale already declared whet getting data from api on ngOnInit

<h3>Question</h3>

I'm trying to fetch data from nodeJS API with angular, I have a variable declared and I want to affect the response from server to it, here is my code :

export class SondageSingleComponent implements OnInit, AfterViewInit { @ViewChild('containerPieChart') element: ElementRef; survey: any = {}; currentUser: any; statistics: any; colorCounter: any = 0; d3Colors: any[] = ["#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d"]; private host: D3.Selection; private svg: D3.Selection; private width: number; private height: number; private radius: number; private htmlElement: HTMLElement; private pieData = []; constructor( private http: HttpClient, private route: ActivatedRoute, private router: Router, private toastr: ToastrService ) { } ngOnInit() { this.route.params.subscribe(params => { this.http.get('/api/surveys/' + params.id).subscribe(survey => { this.survey = survey; // console.log(this.survey) debugger this.http.get('/api/surveys/getStatistics/' + params.id).subscribe(statistics => { this.statistics = statistics; this.statistics.options.forEach(option => { this.pieData.push(option.number); option.color = this.d3Colors[this.colorCounter]; this.colorCounter = this.colorCounter + 1; }); }); }, error => { if (error.status === 400) { this.showError(error.error.error, 'Erreur!'); if (error.error.error === 'Le sondage demandé n\'existe plus!') { this.router.navigateByUrl('/sondage'); } } }); }); } <hr />

the data coming successfully from node side and when I try to affect the data to survey variable and to try, any one can tell why can't read this.survey ?


<h3>Answer1:</h3>

This is how I would've implemented it (take a look at the code comments)

ngOnInit() { this.route.params .subscribe(params => { this.http.get('/api/surveys/' + params.id) .pipe( take(1), // using switchMap is a lot better than subscribing switchMap(survey => { this.survey = survey; return this.http.get('/api/surveys/getStatistics/' + params.id) }) ) .subscribe(statistics => { const newPieData = [] // using .map is a better use of javascript statistics.options = statistics.options .map(option => { newPieData.push(option.number); this.colorCounter = this.colorCounter + 1; option.color = this.d3Colors[this.colorCounter]; return option; }); this.pieData = [...this.pieData, ...newPieData]; // change this.statistics reference only at the end // a change triggers the angular cycle this.statistics = statistics; }, error => { if (error.status === 400) { this.showError(error.error.error, 'Erreur!'); if (error.error.error === 'Le sondage demandé n\'existe plus!') { this.router.navigateByUrl('/sondage'); } } }); }); }

I'd really recommend using types.

Hope this helps!


<h3>Answer2:</h3>

Golden rule with observables: Don't nest subscriptions!

It looks like you want to:

<ol><li>Listen for route param changes</li> <li>Make 2 http requests based on a route param</li> <li>Update a chart based on the http responses</li> </ol>

Listening to this.route.params is a good start for #1.

Secondly, use switchMap to run a new observable. And use forkJoin to call multiple observables in parallel.

<pre class="lang-js prettyprint-override">ngOnInit() { this.route.params.pipe( switchMap(params => forkJoin({ survey: this.http.get('/api/surveys/' + params.id), statistics: this.http.get('/api/surveys/getStatistics/' + params.id) })) ).subscribe(result => { this.survey = result.survey; this.statistics = result.statistics; this.updateChart(result.statistics); }, error => this.handleError(error) ); } private handleError(error) { if (error.status === 400) { this.showError(error.error.error, 'Erreur!'); if (error.error.error === 'Le sondage demandé n\'existe plus!') { this.router.navigateByUrl('/sondage'); } } } private updateChart(statistics) { statistics.options.forEach(option => { this.pieData.push(option.number); option.color = this.d3Colors[this.colorCounter]; this.colorCounter = this.colorCounter + 1; }); }

DEMO: https://stackblitz.com/edit/angular-m4agxv

Angular < 8

forkJoin({}) is only usable since RxJS 6.5 (Angular >= 8). For earlier versions you will have to pass in an array of observables.

<pre class="lang-js prettyprint-override">ngOnInit() { this.route.params.pipe( switchMap(params => forkJoin([ this.http.get('/api/surveys/' + params.id), this.http.get('/api/surveys/getStatistics/' + params.id) ])) ).subscribe(result => { this.survey = result[0]; this.statistics = result[1]; this.updateChart(result[1]); }, error => this.handleError(error) ); }

来源:https://stackoverflow.com/questions/60526291/undefined-varibale-already-declared-whet-getting-data-from-api-on-ngoninit

Recommend

  • Is it possible to verify a Hover text using cypress?
  • Undefined varibale already declared whet getting data from api on ngOnInit
  • Long parsing incorrectly JSON response ASP.NET MVC
  • Difference between Keras model.fit using only batch_size and using only steps_per_epoch
  • SyncAdapter android:userVisible attribute not working
  • I didn't close previous DataReader, but where?
  • Selenium IDE: How to continue script on element not found or on error
  • How to show a element immediately, such as a loading indicator, with Vue? nextTick isn't workin
  • show border grid lines only between elements
  • Lifetime of references in STD collections
  • Login code sample which has been hacked via SQL Injection, although mysql_real_escape_string…
  • Facebook URL Debug: Sorry, something went wrong. We're working on getting this fixed as soon as
  • Hide page while loading with pace.js
  • g++ c++17 class template argument deduction not working in a very specific case
  • Angular 2 final - change route parameter on the URL programmatically
  • Why does the parameterless Guid constructor generate an empty GUID?
  • how to implement OnClickListener for custom ViewHolder in my recycler view?
  • Bash Script Variable Scope Issue
  • Generating all permutations with repetition
  • Hosting existing node.js apps on Windows Azure
  • Google Cloud Dataflow consume external source
  • How to add GeoJSON(MultiLineString) layer to a Google Map
  • Export dataframe to pdf/png in R [duplicate]
  • How to indentify which commit introduce which changes in a octopuss merge
  • Variable amount of columns returned in mysqli prepared statement
  • How to access WPF class library from Silverlight using iron python. Is it possible?
  • Enabling/Disabling row in a datagrid(MVVM pattern)
  • PHPMailer do not work properly sometimes on gmail port 465 or 587 on localhost
  • how to count number of sprites swift
  • COM Interop hang freezes entire COM system. How to cancel COM call
  • Retrieving saved checkboxes' name and values from database
  • Git for windows has stopped working
  • XEP-0166: Jingle protocol implementation for voice/video chat in iOS