javascript - Node API 通过 Express 对客户端(Angular2)的正文响应格式错误

Question

当我的 Angular2 组件请求获取我的假模型数据对象时，它会像这样返回:

_body:“[↵ {↵ “id”:0，↵ “标题”:“2017 年奥斯卡”，↵ “图形”:“https://wikitags.com/images/OscarsBanner.png”， ↵

我期待的是一个像这样的数组:

[ 
  { id: 0,
    title: '2017 Oscars',
    graphic: '/images/OscarsBanner.png',
    categorycards: [ [Object], [Object], [Object], [Object] ] },
  { id: 1,
    title: '2017 Super Bowl',
    graphic: '/images/SuperBowlBanner.png',
    categorycards: [ [Object], [Object], [Object], [Object] ] },
  { id: 2,
    title: 'What people are talking about',
    graphic: null,
    categorycards: [ [Object], [Object], [Object], [Object] ] } 
]

---

模型

我的 backend/models/home.ts 是什么样的

export function homeData() {
    return [
        {
            id: 0,
            title: '2017 Oscars',
            graphic: '/images/OscarsBanner.png',
            categorycards: [
                {
                    type: 'image',
                    graphic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Ryan_Gosling_2_Cannes_2011_%28cropped%29.jpg/1024px-Ryan_Gosling_2_Cannes_2011_%28cropped%29.jpg?width=440',
                    title: '2017 Oscar Nominee for Best Actor',
                    listings: ['Rayn Gosling', 'Denzel Washington', 'Andrew Garfield', 'Casey Affleck', 'Viggo Mortensen']
                }
                //...
            ]
        }
        //...
    ];
}

客户端API

api.service.ts

@Injectable()
export class ApiService {
    private getFeaturedUrl: string = '/wiki/api';

    constructor(public http: Http) {}

    /**
     * Get featured categories data for homepage
     */
    getFeatured(): Observable<{}> {
        return this.http.get(`${this.getFeaturedUrl}/home`)
        .do(res => console.log('getFeatured res', res))
        .map(res => res.json().data)
        .catch(this.handleError);
    }

console.log 在这里:

首页组件

universalInit() {
    console.log('universalInit...')
    this.api.getFeatured()
        .subscribe(categories => {
            console.log('categories', categories);
            // this.testFeaturedCategories = categories
        });

Node/Express API 端点

// API CRUD ////////////////////////////////////////////////////////////////////
app.get('/wiki/api/home', (req, res) => {
    console.log('homeData()', homeData());
    if (!homeData()) returnError(res, 'No home data found');
    res.json(homeData());
});

在终端中，我看到了我的 home.ts 模型数组:

知道为什么我的 res.body 看起来被抬高了吗？

Answer 1

看起来它可能试图转换 json 对象两次。虽然不完全确定

代替 res.json(homeData())

尝试:

res.send(homedata())

如果这不起作用，那么我的猜测是转向 Angular 一侧并进行更改

.map(JSON.parse(res.json().data))