CODEWITHSUNDEEP
javascriptjsonnode.jsangularexpress
Leon Gaban
Leon Gaban

Reputation: 39034

Body response to client(Angular2) from Node API via Express formatted wrong

When my Angular2 component makes a request to get my fake model data object it gets returned like so:

_body: "[↵ {↵ "id": 0,↵ "title": "2017 Oscars",↵ "graphic": "https://wikitags.com/images/OscarsBanner.png",↵

enter image description here

What I am expecting is an Array like so:

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

The Model

What my backend/models/home.ts looks like

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']
                }
                //...
            ]
        }
        //...
    ];
}

The client 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);
    }

The console.log here:

enter image description here

The homepage component

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

The Node/Express API endpoint

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

In the terminal, I see my home.ts model Array:

enter image description here

Any ideas why my res.body is looking jacked up?

Upvotes: 1

Views: 251

Answers (1)

BRogers
BRogers

Reputation: 3614

It looks like it may be trying to convert the json object twice. Not completely sure though

instead of res.json(homeData())

Try:

res.send(homedata())

If that doesn't work, then my guess would be to go on the angular side and change

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

Upvotes: 2

Related Questions