显示数组中的json数据

Question

I'm trying to display some json data I got from a get request. So far I've been able to display other arrays with no problem, but I'm having trouble displaying this particular array for some reason, and I'm not getting any errors.

the one that won't display correctly is the showtimes array.

<div *ngIf="show">
<div *ngFor="let shows of show"class="showtime">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{shows.title}}</h3>
    </div>
    <div class="panel-body" >
        <div class="row">
            <div class="col-md-7 col-sm-5 col-xs-12 ">

                <img  class="thumbnail movie_pic" src="http://developer.tmsimg.com/{{shows.preferredImage.uri}}?api_key={{api}}"><br>

            </div> 
            <div class="col-md-5 col-sm-7 col-xs-12">
                <ul class="list-group">
                    <li class="list-group-item">Genres: {{shows.genres}}</li>
                    <li class="list-group-rel">Release Date: {{shows.releaseDate}}</li>
                    <li class="list-group-rel">{{shows.longDescription}}</li>
                    <li *ngFor="let shows of show.showtimes" class="list-group-rel">shows.theatre.name</li>
                </ul>

            </div>
        </div>

    </div>
    </div>
    </div>
    </div>

Answer 1

You are missing {{}} expression

<li *ngFor="let shows of show.showtimes" class="list-group-rel">{{shows.theatre.name}}</li>

EDIT

Change it to some other variable name, since you are already using shows,

<li *ngFor="let showdetail of show.showtimes" class="list-group-rel">{{showdetail.theatre.name}}</li>

Answer 2

As it looks from your snapshot, the array of objects is stored in variable showtimes , if that is the case, try the below code:

<li *ngFor="let detail of showtimes" class="list-group-rel">
    {{detail.theatre.name}}
</li>

Answer 3

A nested ngFor loop solved the problem..

<div *ngFor="let shows of show"> 
    <div *ngFor="let detail of shows.showtimes"> 
    <p>{{detail.theatre.name}}</p>
    </div>              
</div>

works perfectly, thanks for the help