How to pass array of object from nodejs to angular

Question

So I have this nodejs backend

router.get('/getByZip',passport.authenticate('jwt',{session:false}), function(req, res, next) {
 // res.json({user:req.user});
var zipcode = req.user.zipcode;

  Log.getByZip(zipcode,function(err,callback){
    if(err) throw err;
    if(callback)
    res.json({docs:callback})
    if(!callback)
    res.json({success:false,msg:"ERROR"})
  });
});

I get this result:

{
    "docs": [
        {
            "_id": "59720ab774fece2936604555",
            "vehicletype": "SUV",
            "platenumber": "AX-1235",
            "time": "22:07:06",
            "from": "+639158861700",
            "to": [
                "admin"
            ],
            "date": {
                "dayN": "21",
                "year": "2017",
                "dayS": "Friday",
                "month": "July"
            },
            "location": {
                "cc": "PH",
                "city": "2010",
                "street": "Clark North Exit"
            },
            "name": {
                "mdname": "Nocum",
                "lname": "Yambao",
                "fname": "Arian"
            }
        },
        {
            "_id": "59720be974fece2a2d59a2fe",
            "vehicletype": "SUV",
            "platenumber": "AX-1235",
            "time": "22:12:15",
            "from": "+639158861700",
            "to": [
                "admin"
            ],
            "date": {
                "dayN": "21",
                "year": "2017",
                "dayS": "Friday",
                "month": "July"
            },
            "location": {
                "cc": "PH",
                "city": "2010",
                "street": "Clark North Exit"
            },
            "name": {
                "mdname": "Nocum",
                "lname": "Yambao",
                "fname": "Arian"
            }
        },
        {
            "_id": "59720c9874fece2b2801c8fa",
            "vehicletype": "SUV",
            "platenumber": "AX-1235",
            "time": "22:15:23",
            "from": "+639158861700",
            "to": [
                "admin"
            ],
            "date": {
                "dayN": "21",
                "year": "2017",
                "dayS": "Friday",
                "month": "July"
            },
            "location": {
                "cc": "PH",
                "city": "2010",
                "street": "Clark North Exit"
            },
            "name": {
                "mdname": "Nocum",
                "lname": "Yambao",
                "fname": "Arian"
            }
        },
        {
            "_id": "59720d1274fece2c042419c1",
            "vehicletype": "SUV",
            "platenumber": "AX-1235",
            "time": "22:17:21",
            "from": "+639158861700",
            "to": [
                "admin"
            ],
            "date": {
                "dayN": "21",
                "year": "2017",
                "dayS": "Friday",
                "month": "July"
            },
            "location": {
                "cc": "PH",
                "city": "2010",
                "street": "Clark North Exit"
            },
            "name": {
                "mdname": "Nocum",
                "lname": "Yambao",
                "fname": "Arian"
            }
        }
    ]
}

And I want this json on my angular so I've made a service:

import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import {tokenNotExpired} from 'angular2-jwt';


@Injectable()
export class PagerService {

  authToken:any;
  constructor(private http:Http) { }

  getzip(){

        var headers = new Headers();
        this.loadToken();//access token
        headers.append('Authorization',this.authToken);
        headers.append('Content-type','application/json');
        return this.http.get('http://localhost:3000/logs/getByZip',{headers:headers})
        .map(res=> res.json());
    }

   loadToken(){
        var token = localStorage.getItem('id_token');
        this.authToken = token;
        //this.user = user;
    }

}

And in my component.ts

import { Component, OnInit } from '@angular/core';
import {PagerService} from '../../service/pager.service';
import {Router} from '@angular/router';


@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {

  doc = [];

  constructor(private pagerService:PagerService,
              private router:Router
            ) { }

  ngOnInit() {
     this.pagerService.getzip().subscribe(profile =>{
        this.doc = profile.doc;
        console.log(this.doc+"MESSAGES")
     },
     err => { console.log(err); return false;});
  }

}

but when I call doc I get undefined . I'm trying to display this on my html but when I try to call doc it doesn't show anything and the console.log show undefined .

Answer 1

check the typeof profile. It seems it is string. you need to do JSON.parse(profile).doc

Answer 2

If you have configured your node http server correctly it should work with following code.

router.get('/getByZip',passport.authenticate('jwt',{session:false}), function(req, res, next) {
    res.setHeader('Content-Type', 'application/json');
     // res.json({user:req.user});
    var zipcode = req.user.zipcode;

    Log.getByZip(zipcode,function(err,callback){
    if(err) throw err;
    if(callback){
         res.send(JSON.stringify({docs:callback}));
    }
    if(!callback)
        res.send(JSON.stringify({success:false,msg:"ERROR"}));
});

If you are getting a correct response in callback this will definitely send the response in your angular service.