获取请求不满足Angular-Express

Question

I'm new to MEAN stack I want to have data fetch from express server (which I created with mongodb) when I click button, the function on button click was executed but request was not fulfilled, the database, server all running fine, I just got nothing at console, here are my client and server files:

• client(running on http://localhost:3001 )

• Imported modules and added to imports in ngModule

import { Http , Headers, HttpModule, Response, RequestOptions } from "@angular/http";

Injected in constructor as service, then: template:

<button md-button class="button1" (click)="newQues()">Submit</button>

In class:

newQues(){

  this.http.get('https://localhost:3000/')
                .map(this.extractData)
                .catch(this.handleError);  //these copied from angular2
                                           //official documentation          
}

private extractData(res: Response) {
let body = res.json();
console.log(body);  //not getting console nor error
return body.data || { };
}

server running on port 3000

app.get('/', function (req, res) {

   model.findOne({ id: 1}, function (err, data) {
   if (err) {
   console.log(err)
   } else {
   console.log(data);
   res.send(data);
}
})

getting these error when requesting

the whole server code:

import * as express from "express";
var app = express();
import * as path from "path";
import * as mongoose from "mongoose";
import * as lodash from "lodash";
import * as morgan from "morgan";


app.use(express.static(path.join(__dirname, "./../client")));

var uriString = 'mongodb://localhost/quizapp';
mongoose.connect(uriString, function (err, res) {
if (err) {
console.log("Error occured while establishing connection " + err);
} else {
console.log("Connection successful ");
}
})

var schema = new mongoose.Schema({     //schema
question: String,
id: Number
})

var quizz = mongoose.model('Quiz', schema);  //creating model

var firstDoc = new quizz({
question: 'question 1',
id: 1
})
var secondDoc = new quizz({
question: 'question 2',
id: 2
})

var question_data = [firstDoc, secondDoc];

quizz.insertMany(question_data, function (err, res) {
if (err) {
console.log("Error occured while saving document object " + err)
} else {
console.log("Data Saved Successful");
}
})

app.get('/data', function(req, res) {
quizz.findOne({ id: 1}, function (err, data) {
 if (err) {
   console.log(err)
 } else {
   console.log(data);
   res.send(data);   //res.json
 }
 })
 })

when I'm routing to localhost:3000/data the data from database displayed on window but when requesting that route from client(see client side code this.http.get) error occurring(picture attached)

Answer 1

for extracting data you have to subscribe to it. try this way

export class SimpleHTTPComponent {
      data: Object;
      loading: boolean;

      constructor(public http: Http) {
      }

      makeRequest(): void {
        this.loading = true;
        this.http.request('http://jsonplaceholder.typicode.com/posts/1')
          .subscribe((res: Response) => {
            this.data = res.json();
            this.loading = false;
          });
      }
    }

and i think you are not using this with body . your console.log should be like this. console.log(this.body);