从Node.js后端将数据调用到Angular前端

Question

I've got a node.js back-end code calling a database and I need to display this data on my Angular from-end.

This is my back-end code:

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");

//Own Imports
var cosmosDB = require("./utils/azure-cosmos");
var dataLake = require("./utils/azure-datalake");

var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get("env") === "development" ? err : {};

// render the error page
res.status(err.status || 500);
res.render("error");
});

//Our code starts here
function main() {

//Cosmos Functions
//Gets all devices from cosmos
cosmosDB.findAll("devices", function(docs) {
console.log("Docs found: ", docs);
});

//Gets one device by filter
cosmosDB.findOne("5b4b8d63d08bb1fa920b5f40", "devices", function(docs) 
{
console.log("Doc found find one: ", docs);
});

//Datalake Functions
//Gives you the statuses off all the files in datalake
dataLake.findAll(function(docs) {
console.log("All statuses from datalake: ", docs);
});

//Opens a file with the given name
dataLake.open("5ae6d8e3e892cb63994509fa_1538040038280.json", 
function(doc) {
console.log("Doc requested to be opened: ", doc);
});
}

main();

// app.listen(3000)
console.log("App running on port 3000");

module.exports = app;

I created a api.service.ts on my front-end but I'm clearly missing something! This is how it looks like at the moment:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';


@Injectable()
export class ApiService {

devices = [];

constructor(private http: Http) {}

getDevices() {
this.http.get('http://localhost:3000/devices').subscribe(res => {
  this.devices = res.json();
});
}

How can I correctly implement this so I can use the data on my front-end project?

Thank you

Answer 1

I think you have to import HttpClient not Http. Try this:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class ApiService {

devices: any;

constructor(private http:HttpClient) {}

getDevices() {
this.http.get('http://localhost:3000/devices')
    .map(res => res)
    .subscribe(result => this.devices = result);
}

This should work fine try it.

You can also define your own structure of the response and you are sending and use it so that you won't have to use the map function you will get the response directly in that format. for example:

export interface Result {
    x: string;
    y: string[];
    ...
}

and use it like

getDevices(): Observable<Result>{
   this.http.get<Result>('http://localhost:3000/devices')
    .subscribe(result => this.devices = result);

Refer to these stackoverflow questions also which are similar:

Angular - res.json() is not a function

Angular2 http.get() ,map(), subscribe() and observable pattern - basic understanding