AngularJS: Output HTML based on variable count

Question

I have an array slides that contains variable stars inside of it. I need to grab the value for stars on each slide, then use that number to repeat an HTML string for each slide.

I can get the value of stars, but it iterates through all 6 slides, and provides their values 6 times.

I need to get all the values of stars only 1 time.

var slides = [    
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 4 
},
{ 
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 3
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 2
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 1
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 5
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 2
}
];

$scope.addStars = function(){
  i = 1;
  for (i=1; i<slides.length; i++) {
    var starsCount = slides[i].stars;   
    var starsHTML = '<a href="#">☆</a>';
    starsFinal = starsHTML.repeat(starsCount); 
    console.log(starsFinal); 
  }
}

I feel like we're missing the logic that actually calls addStars(). As this logic is, it shouldn't do what you are saying it is, provided it is called only once. — Taplar
– Taplar, Commented Jan 18, 2019 at 22:52
Why in the world are you building HTML like this? Unless you have a really good reason behind it, this is extremely poor angularJS design. You're much better off using ng-repeat. — BShaps
– BShaps, Commented Jan 19, 2019 at 1:31

jphillips05 · Accepted Answer · 2019-01-21 13:17:36Z

1

You could do something like this:

$scope.slides = [    
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 4 
},
{ 
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 3
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 2
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 1
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 5
},
{
  'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
  'stars' : 2
}
];

$scope.addStars = function(startCount) {
  return Array(startCount).fill().map(function() {
    return '<a href="#">☆</a>';
  }).join('');
}

<div ng-repeat="slide in slides">
  <div ng-bind-html="addStars(slide.stars)"></div>
</div>

edited Jan 21, 2019 at 13:17

answered Jan 18, 2019 at 22:56

jphillips05

788 bronze badges

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

5 Comments

Rob Myrick Over a year ago

This code iterates through all 6 slides, and provides their values 6 times. I'm calling this function in the html as this: ng-bind-html="addStars()". Maybe this is wrong?

jphillips05 Over a year ago

Misread the requirements, looks like you are looking for total number of stars through all slides. Answer has been updated.

Rob Myrick Over a year ago

Hi @jphillips05...I must be mis-communicating...I need to iterate through the 6 slides only 1 time. But on each iteration, I need to get the value of stars so that it outputs with the slide being displayed. I am using ng-repeat to iterate through the slides, if that helps, so maybe there are other ways of accomplishing the same goal.

jphillips05 Over a year ago

@RobMyrick updated with example for template. You don't need to iterate through the list outside of ng-repeate, just reference a function on scope and tell it how many starts you need.

Rob Myrick Over a year ago

thank you for the update. This worked beautifully. And the whole AngularJS is new to me, so thank you for providing an explanation behind your code. Much appreciated.

Collectives™ on Stack Overflow

AngularJS: Output HTML based on variable count

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related