I am not getting response from nodeJS server in angular 2

Question

I am newbie to MEAN stack development. So, please help me to figure out the problem.

app.js

const express = require('express');

const app = express();
const path = require('path');


app.use(express.static(path.join(__dirname, './darwin-src/public')));


const port = 3000;

app.get('/images', (req, res) => {
    console.log('In server');
    var data;
    var Scraper = require ('images-scraper')
    , google = new Scraper.Google();
    google.list({
        keyword: 'banana',
        num: 10,
        detail: true,
        nightmare: {
            show: false
        }
    })
    .then(function (data) {
        console.log('first 10 results from google', data);
        res.end("" + data);
    })
    .catch(function(err) {
        console.log('err', err);
    });
});

app.listen(port, () => {
    console.log(`Starting the server at port ${port}`);
});

image-service.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { Image } from './model/image';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/of';

@Injectable()
export class ImageServiceService {

  constructor(private http: Http) { }

  private serverApi = 'http://localhost:3000';

  public getImages(image: string): Observable<Image[]> {
    console.log('Inside Service');
    let URI = `${this.serverApi}/images`;
    return this.http.get(URI)
    .map(function(res) {
      return res.json();
    });
  }
}

image-view.component.ts

import { Component, OnInit } from '@angular/core';
import { ImageServiceService } from '../image-service.service';

import { Image } from '../model/image';

@Component({
  selector: 'app-image-view',
  templateUrl: './image-view.component.html',
  styleUrls: ['./image-view.component.css']
})
export class ImageViewComponent implements OnInit {
  private data: Image[] = [];
  constructor(private imageService: ImageServiceService) { }

  ngOnInit() {
  }

  onSubmit(image: string) {
    console.log(image);
    this.imageService.getImages(image).subscribe(response => this.data = response);
    console.log(this.data.length);
  }

}

The length of array is zero and I can't figure out why. The response comes on nodejs console after a while but the frontend displays the result before the response comes. Please help!

score 0 · Accepted Answer · answered Dec 11 '17 at 18:49

Hit the server url separately in browser and see if you get the expected response. If this is okay, then the problem is with the client.
On seeing your client code, one issue seems obvious. You are not using the observable from ImageServiceService properly. All your manipulations should be within the subscribe method.

onSubmit(image: string) { this.imageService.getImages(image).subscribe(response => { this.data = response; console.log(this.data.length); // Do other manipulations that you wish to do }); }
If you using the observable to display something in the view, then consider . using async pipe

score 0 · Answer 2 · answered Dec 11 '17 at 18:50

The code in the subscribe handler is not executed synchronously. So, your console.log statement is executed before you get a response from your server. I don't see your image-view.component.html markup. But, I believe you need to use the async pipe in your bound option.

private data$: Observable<Image[]>;

onSubmit(image: string) {
    console.log(image);
    this.data$ = this.imageService.getImages(image);
}

And you HTML:

<div *ngFor="let image of data$ | async">
    {{image.value}}
</div>

I am not getting response from nodeJS server in angular 2

2 Answers2