如何将对象数组从nodejs传递给angular

时间:2017-07-22 11:34:48

标签: javascript node.js angular

所以我有这个nodejs后端

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"})
  });
});

我得到了这个结果:

{
    "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"
            }
        }
    ]
}

我希望这个json在我的角度上,所以我已经提供了服务:

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;
    }

}

在我的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;});
  }

}

但是当我致电doc时,我得到了undefined。我试图在我的HTML上显示此内容,但当我尝试拨打doc时,它没有显示任何内容,而console.log显示undefined

2 个答案:

答案 0 :(得分:0)

检查配置文件的类型。看来它是字符串。你需要做JSON.parse(profile).doc

答案 1 :(得分:0)

如果您已正确配置节点http服务器,则应使用以下代码。

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"}));
});

如果你在回调中得到正确的答案,肯定会在你的角度服务中发送响应。