Angular 2 HTTP Request Issue - express

Question

Really hoping someone can help me.
What I am trying to do: Call a REST API for a json and resolve a Angular 2 promise.
ServerAPI running Node.js/ExpressJS/Lodash
Server.js file:
var express = require('express');
var app = express();
var bodyParser = require("body-parser");
var data = require('./data.json');
var _ = require('lodash');
var cors = require('cors');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.get('/GetData', function (req, resp) {
if (req.query.search != null) {
var result = _.find(data, function (o) {
return o.value === req.query.search.toLowerCase().trim()
});
return resp.send(result)
}
});
app.listen(1337, function () {
console.log('Listening at Port 1337');
});
Ran as tested http://localhost:1337/GetData?search=colorado and returns a vaild json object.
ClientAPI
Service file calling HTTP request:
import {Injectable} from "#angular/core";
import {Http} from "#angular/http";
import {Config} from "../config";
import {SearchResult} from "../models/search-result.model";
import {MockSearchData} from "../mock/mock-search-results";
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
#Injectable()
export class ApiDataService {
constructor(private http:Http) {
}
public performSearchRequest(searchTerm:string,queryType:string):Promise<SearchResult[]> {
return new Promise<SearchResult[]>((resolve, reject) => {
let url = Config.apiBaseUrl + Config.searchApi;
url += "?search=" + searchTerm;
console.log("Your query to be: " + url);
if (searchTerm != "") {
if (queryType == 'mock') {
resolve(MockSearchData);
} else if (queryType == 'api') {
let data = [];
this.http.get(url)
.map(resp => resp.json())
.subscribe(getData => data = getData);
resolve(data);
} else {
reject("No query type found.");
}
} else {
reject("Please enter a search term.");
};
});
}
}
The resolve of the mock data which is a local json file within the ClientAPI works perfectly. I need to get the if function for the api query type to work.
The Angular app starts with no issue and runs the http.get without error. I checked the network tab under the dev tools and can see that a HTTP request was done and returns its response is the valid JSON object I want resolved e.g there is data being returned. Yet the table i am resolving this into is blank.
WHAT AM I DOING WRONG!

Answer 1

The issue occurs here:
this.http.get(url)
.map(resp => resp.json())
.subscribe(getData => data = getData);
resolve(data);
You subscribe to the observable, but it isn’t “resolved” yet when you call resolve directly afterwards. That means you’re really just calling resolve([]).
Instead, do something like this:
this.http.get()./*...*/.subscribe(result => resolve(result));
You also might want to look into the toPromise method on Observables as well as the way to construct a resolved promise directly.