Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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"
        }
    ]
}
share|improve this question
    
I think it should work. is this what your getEventData contains? – micronyks yesterday
    
do {{data|json}} and copy and paste value in your question. – micronyks yesterday
    
yes @ micronyks. by interpolation i get the above json data – adongo yesterday
    
reproduce problem in plunker. – micronyks yesterday

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')
);
share|improve this answer
1  
Oh yes... +1..... – micronyks yesterday
    
{{getEventData}} produces [object Object],[object Object]. also by logging getEventData to the console the output is like this: Array(2) @dfsq – adongo yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.