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>
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>
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>
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
Related
Long story short, my website contains a list of hotels that have few infos. I wanna sort the ordered list of hotels by one of those infos e.g. by rating. I did some research and still couldn't find the right js algorithm for it to make it work.
<ol>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>A</h1>
<div class="rating"><span>3.8</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>B</h1>
<div class="rating"><span>4.5</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>C</h1>
<div class="rating"><span>2.2</span></div>
</div>
</div>
</li>
</ol>
Create an array from the items and use sort() on the array then append each item in the sorted array back into the parent.
const list = document.querySelector('ol'),
items = Array.from(list.querySelectorAll('.item'));
items.sort((a,b)=>{
const [ratA, ratB] = [a,b].map(el=> el.querySelector('.rating span').textContent)
return ratB - ratA;// descending sort
});
items.forEach(el => list.append(el))
<ol>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>A</h1>
<div class="rating"><span>3.8</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>B</h1>
<div class="rating"><span>4.5</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>C</h1>
<div class="rating"><span>2.2</span></div>
</div>
</div>
</li>
</ol>
If you have this rating stored in json form in a database somewhere it should be as simple as sorting an array of objects hotels.sort((a, b) => b.rating -> a.rating); and then rendering that array out. This is probably the most efficient method of doing this. Also note that if you have thousands of hotels to sort you might considering doing this in the backend.
js app
Now In html I user ng-repeat
<div class="row">
<div ng-repeat="item in Photos" class="col col-33"style="border:none">
<img ng-src="{{item.image}}" imageonload style="width:100px;height:120px;margin-left:auto;margin-right:auto;display:block">
</div>
</div>
My problem is that I have 5 images in list but only 3 of them is on dipslay. Another 2 is not shown on display. How can I solve problem ?
Thanks in advance
May be your images have same url value in the Photos array so you need to use ng-repeat with track by $index like this
<div class="row">
<div ng-repeat="item in Photos track by $index" class="col col-33"style="border:none">
<img ng-src="{{item.image}}" imageonload style="width:100px;height:120px;margin-left:auto;margin-right:auto;display:block">
</div>
</div>
$scope.imagearray = {
'images' : []
};
var i,j,temparray,chunk = 3;
for (i=0,j=$scope. Photos.length; i<j; i+=chunk) {
temparray = $scope. Photos.slice(i,i+chunk);
$scope.imagearray.images.push(temparray);
}
<div ng-repeat="img in imagearray.images">
<span ng-repeat="item in img" ></span>
</div>
Try col-xs-2 instead of col-33:
<div class="row">
<div ng-repeat="item in Photos" class="col col-xs-2">
<img ng-src="{{item.image}}">
</div>
</div>
I'm trying to display all the .name and .info elements for actor and character objects shown below, using *ngFor.
I create the object here in my resultpage.component:
this.actorInfo = [{actor: res.actorInfo, character: this.characters}];
and here is my html for running through the elements in resultpage.html:
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<span class="character">{{item.name}}</span>
<span class="actor">{{item.info}}</span>
</div>
</div>
The above code does not output any errors, but it also does not output any information. I believe this is due to the first element on the object being 0:. But trying *ngFor="let item[0] of actorInfo" causes major problems in Angular.
How can I display all the name and info items in my object?
You need to have two nested ngFor,
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<div class="member" *ngFor="let actor of item.actorInfo ">
<span class="character">{{actor.name}}</span>
</div>
<div class="member" *ngFor="let character of item.character">
<span class="actor">{{character.info}}</span>
</div>
</div>
</div>
Try this:
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<div style="width: 100%">
<div style="width: 50%; display: inline-block">
<span class="character" *ngFor="let actor of item?.actor">
{{actor.name}}
</span>
</div>
<div style="width: 50%; display: inline-block">
<span class="actor" *ngFor="let character of item?.character">
{{character.info}}
</span>
</div>
</div>
</div>
</div>
my html code look like :-
<div id="secone" class="divs row wow bounceInRight animated">
<div class="question" align="center"> {{Questions.QuestionLabel}}</div>
<div class="question_img" ng-hide="Questions.QuestionImage == 'no_image.jpg'" align="center"><img src="http://api.smartlearner.com/Images/Images/QuestionImages/{{Questions.QuestionImage}}" class="img-responsive"></div>
<div class="col-sm-12 clearfix"><br /></div>
<div class="list-group list_top" data-toggle="items">
<ul class="left1 second optionlist" data-value="{{Questions.QuestionID}}" que-id="{{Questions.QuestionID}}">
<li ng-repeat="Options in Questions.Options" id="{{Options.IsCorrectOption}}">
<a class="list-group-item"><i class=""> </i><input type="checkbox" value="{{Options.QuestionOptionID}}" style="display:none"><img ng-show="Options.OptionText == ''" src="http://api.smartlearner.com/Images/Images/AnswerImages/{{Options.OptionImage}}" style="max-width:15%">{{Options.OptionText}}</a>
</li>
</ul>
</div>
<div class="col-sm-12 clearfix"><br /></div>
<div class="ShowExplaination">
<div>
<div class="explation_title">Explanation</div>
<p class="expla_per">{{Questions.QuestionDescription}}</p>
</div>
</div>
<div class="col-sm-12 clearfix"><br /></div>
</div>
i want to find 'ShowExplaination' class using 'optionlist' class which is inside , pls.help me out...
You can use $('#secone .ShowExplanation') to find that element.
i think this may help you. i am doing this to find the class for showing you using the each loop.you can eliminate the loop and use it as you required.
$('div .optionlist').parent().parent().find('.ShowExplaination').each(function (){
console.log('sf'+$(this).attr('class'));
})
I've got a simple chat app in AngularJS, and I'm sending a message to the view which is being outputted on the front end like this:
<div id="messages" class="col-xs-12 chat-messages">
<div class="col-xs-12 chat-message" ng-repeat="message in chatMessages">
<div class="you">
<ul class="media-list">
<li class="media">
<div class="media-left">
<div class="media-object img-circle" style="background-image: url( {{message.avatar_url}} )"></div>
</div>
<div class="media-body">
<div class="media-heading text-muted small">
{{message.nickname}}
</div>
<div class="message-content bubble">
{{message.content}}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
At the moment I am just going through the chatMessages array and outputting them using this div. I have given each message another attribute of kind where I will send to the view different kinds of messages, such as userMe, userOther, global etc. and I will need to use a slightly different HTML markup for each kind of message. I understand that this should be done using ng-if in AngularJS, but I don't quite know how to go about this.
From the view, I will need to output some different HTML depending on the message.kind value.
Any ideas?
If you have several possible div options for each element, I'd use ng-switch, like Tom said in the comments.
The idea is that you switch on the message.kind, or whatever you want to switch on, and have each div as a "Case" for that:
It would look something like this:
<div class="media-body" ng-switch="message.kind">
<div class="media-heading text-muted small" ng-switch-when="1">
{{message.nickname}}
</div>
<div class="message-content" ng-switch-when="2">
{{message.content}}
</div>
<div class="message-content bubble" ng-switch-default>
default text
</div>
</div>
Fiddle
You have two solution to archieve what you want :
<div ng-repeat="msg in messages">
<div ng-if="msg.kind === 'userMe'">userMeMessage</div>
<div ng-if="msg.kind === 'global'">globalMessage</div>
...
</div>
Or this :
<div ng-repeat="msg in messages|filter:{kind:'userMe'}">
UserMe
</div>
<div ng-repeat="msg in messages|filter:{kind:'global'}">
Global
</div>