cannot display JSON data from the backend in angular 2

Question

Am getting data from the back end(api) but i cannot display it to the view. i have tried several solutions but diddn't seem to work.

<ul>
    <li *ngFor="let item of data">
     <h4>{{item.address}}</h4>
     <h4>{{item.city}}</h4>
    </li>
</ul>

the data is pasted below. I used JSON.stringify() to convert the data from object to string and stored it in a variable getEventData. when i do interpolation of the results like this {{getEventData}} it comes alright but cannot format it. thanks in advance.

//get request to api
        this._http.get( this.url + param, {headers:headers})
            .map((res:Response) => res.json())
            .subscribe(
                data => this.getEventData = JSON.stringify(data),
                error =>this.logError(error),
                () => console.log('get request completed sucesfully')
            );

data from api

 {
    "data": [
        {
            "address": "Great 22", 
            "banner_image": null, 
            "city": "Kum", 
            "country": "", 
            "creator_id": 15, 
            "description": "50th congregation", 
            "end_time": "2016-07-05T15:30:00+00:00", 
            "event_id": 5, 
            "is_online": false, 
            "max_tickets_per_user": 1, 
            "show_id": 7, 
            "start_time": "2016-07-05T09:00:00+00:00", 
            "state": "Ash", 
            "title": "Graduation", 
            "venue": "Great Hall"
        }, 
        {
            "address": "CCB Auditorium", 
            "banner_image": null, 
            "city": "Kumasi", 
            "country": "hema", 
            "creator_id": 15, 
            "description": "school graduation", 
            "end_time": "2016-07-06T15:30:00+00:00", 
            "event_id": 5, 
            "is_online": false, 
            "max_tickets_per_user": 1, 
            "show_id": 8, 
            "start_time": "2016-07-06T09:00:00+00:00", 
            "state": "hama", 
            "title": "Graduation", 
            "venue": "CCB Auditorium"
        }, 
        {
            "address": "Engineering Auditorium", 
            "banner_image": null, 
            "city": "Kumasi", 
            "country": "Ghana", 
            "creator_id": 15, 
            "description": "KNUST graduation for the 50th congregation", 
            "end_time": "2016-07-06T15:30:00+00:00", 
            "event_id": 5, 
            "is_online": false, 
            "max_tickets_per_user": 1, 
            "show_id": 9, 
            "start_time": "2016-07-06T09:00:00+00:00", 
            "state": "Ash", 
            "title": "Graduation", 
            "venue": "Engineering Auditorium"
        }
    ]
}

I think it should work. is this what your getEventData contains? — micronyks
– micronyks, Commented Jul 9, 2016 at 12:39
do {{data|json}} and copy and paste value in your question. — micronyks
– micronyks, Commented Jul 9, 2016 at 12:40

dfsq · Accepted Answer · 2016-07-09 12:46:43Z

1

You don't need JSON.stringify if you plan to render data with *ngFor:

.subscribe(
    data => this.getEventData = data.data, // note extra .data
    error => this.logError(error),
    () => console.log('get request completed succesfully')
);

answered Jul 9, 2016 at 12:46

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

adongo Over a year ago

{{getEventData}} produces [object Object],[object Object]. also by logging getEventData to the console the output is like this: Array(2) @dfsq

adongo Over a year ago

thanks it works for me. 1. I took away the key "data" from the result set. i fixed that from the backend. 2. So i did *ngFor="let item of getEventData" instead. 3. and 4. did data => this.getEventData = data.data

Collectives™ on Stack Overflow

cannot display JSON data from the backend in angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related