Angular (2+): HttpClient, subscribe, xhr

Question

Situation:

I'm using Angular CLI. And I'm trying to receive data from the server side (node.js, express). I created new component card-object. I copied this code from the example on this page: https://angular.io/guide/http

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatGridListModule, MatCardModule } from '@angular/material';


import { AppComponent } from './app.component';
import { CardObjectComponent } from './card-object/card-object.component';


@NgModule({
  declarations: [
    AppComponent,
    CardObjectComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatGridListModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<app-card-object></app-card-object>

card-object.component.ts:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-card-object',
  templateUrl: './card-object.component.html',
  styleUrls: ['./card-object.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CardObjectComponent implements OnInit {
  results: string[];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('http://localhost:3000/?cll=bjc').subscribe(data => {
      this.results = data['results'];
    });
   }
}

card-object.component.html:

<p>{{results[0]}}</p>
<p>some text</p>

node.js:

app.get('/', (req, res) => {
    var reqCard = {
        results: ['text 1', 'text 2']
    };
    res.json(reqCard);
});

Problem:

I see that json data I receive successfully (I can see them in google DevTool => Network => XHR). But everything that I see in my angular app is 'some text'. And I see ERROR TypeError: Cannot read property '0' of undefined in my DevTool console.

Question:

Where is a mistake? What have I missed?

Possible duplicate of [Angular2: Cannot read property 'name' of undefined](https://stackoverflow.com/questions/39755336/angular2-cannot-read-property-name-of-undefined) — jonrsharpe, Nov 11 '17 at 20:49

score 0 · Accepted Answer · answered Nov 11 '17 at 20:53

0

Initialize your array so that it has a value before the async call completes:

  ngOnInit(): void {
    this.results = []
    this.http.get('http://localhost:3000/?cll=bjc').subscribe(data => {
      this.results = data['results'];
    });
   }

Bind if results has data:

<p>{{results.length > 0 ? results[0]: ''}}</p>
<p>some text</p>

answered Nov 11 '17 at 20:53

Michael Kang

52,003
16
103
135

Thanks, I don't have any error messages in DevTool console. But I still can't see _'text 1'_ in my angular app. – Maks Mikhalchuk Nov 11 '17 at 21:09
I can't possibly see how your code will work without errors, unless you do what I have suggested above, at a minimum – Michael Kang Nov 11 '17 at 21:10
show us the content of `results` : `console.log(results)` – El houcine bougarfaoui Nov 11 '17 at 21:12
@BougarfaouiElhoucine `results is not defined` – Maks Mikhalchuk Nov 11 '17 at 21:17
sorry this : console.log(this.results) – El houcine bougarfaoui Nov 11 '17 at 21:23
@BougarfaouiElhoucine console.log in subscribe function gives me nothing; console.log after subscribe functiongives me empty array – Maks Mikhalchuk Nov 11 '17 at 21:34
so your array is empty so there's no data to show in your html – El houcine bougarfaoui Nov 11 '17 at 21:36
@BougarfaouiElhoucine I understand that, but I can see received data in DevTools in tab Network: xhr. As I understand the problem is in setting value, but I can't solve it. – Maks Mikhalchuk Nov 11 '17 at 21:45

Angular (2+): HttpClient, subscribe, xhr

Situation:

Problem:

Question:

1 Answers1