Angular2 API call return nothing

Question

My problem is, that it isn't displayed in html form. How can I solve this ? The query is well, and I get the result on URL, but can't display it on component.html. ( It works and I see if I call the URL /api/mainstorage so it display me the JSON content.)

Index.js

var express = require('express');
    var router = express.Router();
    // http://localhost:3000/
    router.get('/', function(req, res, next) {
        res.status(200)
          .json({
            status: 'success',
            message: 'Live long and prosper!'
          });
    });

    var db = require('./queries');  
    router.get('/api/mainstorage', db.getAllDocuments);
    module.exports = router;

Queries.js

var promise = require('bluebird');
var options = {
  // Initialization Options
  promiseLib: promise
};

var pgp = require('pg-promise')(options);
var connectionString ='postgres://dbuser:Storage@localhost/mainstorage' 
var db = pgp(connectionString);
const axios = require('axios');
const API = 'http://localhost:3000';

function getAllDocuments(req, res, next) {

  axios.get(`${API}/main`)

  db.any('SELECT * FROM files')
    .then(function (data) {
      res.status(200)
        .json({
          status: 'success',
          data: data,
          message: 'Retrieved all files'
        });
    })
    .then(documents => {
      res.send(200).json();
    })
    .catch(function (err) {
      return next(err);
    });
}

module.exports = {
    getAllDocuments: getAllDocuments
};

documents.component.ts

export class DocumentsComponent implements OnInit {
    title = 'app works!';
    mainstorage;
    documents: any [];

   constructor(private documentsService: DocumentsService) { }
      ngOnInit() {
    // Retrieve documents from the API
    this.documentsService.getAllDocuments().subscribe(documents => {
      this.documents = documents;
    });
  }
}

documents.service.ts

@Injectable()
export class DocumentsService {
   constructor(private http: Http) {}

   getAllDocuments(){
    return this.http.get('/api/mainstorage')
      .map(res => res.json());
  }
}

documents.component.html

<div class="row" *ngFor="let document of documents">
    <div class="card card-block">
      <h4 class="card-title">{{ documents.id }}</h4>
      <p class="card-text">{{document.country}}</p>

can you log to check if the data appears in the service call — Rahul Singh
– Rahul Singh, Commented Oct 4, 2017 at 8:47

mxr7350 · Accepted Answer · 2017-12-13 16:17:26Z

1

You are not able to see anything in the html because service data is asynchronous and you are trying to display it before the service returns it back. You can solve this by wrapping your variables in *ngIf

<div *ngIf='documnets'>
  <div class="row" *ngFor="let document of documents">
    <div class="card card-block">
      <h4 class="card-title">{{ documents.id }}</h4>
      <p class="card-text">{{document.country}}</p>
    </div>
  </div>
</div>

*ngIf will check if there are documents and once data from service is received it will be displayed.

edited Dec 13, 2017 at 16:17

answered Oct 4, 2017 at 8:44

mxr7350

1,4543 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

msanford Over a year ago

We use the pattern you suggest, too. I wonder, does *ngFor="let document of documents | async" accomplish the same thing?

Collectives™ on Stack Overflow

Angular2 API call return nothing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related