Loading a list from API with Angular (ng-repeat), then add some additional information with jQuery

Question

I asked this before and didn't get an answer. This time around I'll try to explain better.

So basically, I'm loading a list of Formula 1 constructors from the Ergast API. Because the API does not offer all the information I want, such as constructor foundation years, I have to use jQuery to add them.

The HTML markup is pretty simple. Tag for the dynamic content, and an empty tag for the foundation year.

<div id="constructors" ng-repeat="constructor in constructors">
   <img src="img/flags/{{constructor.nationality}}.png" />
   <h2 id="constructor">{{constructor.name}}</h2>
   <h3 id"foundYear"></h3>
</div>

I know that the following jQuery would work, if there was only one element:

$(document).ready(function(){
  if ($('#constructor').is(":contains('McLaren')")) {
    $('#foundYear').append('1963');
  }
});

I don't really know how to approach this since I'm still quite new to Javascript. Here's a picture to really understand what I'm trying to do.

enter image description here

score 0 · Accepted Answer · answered Sep 09 '14 at 17:49

Can you not use ng-if to put in that information inside your repeat?

<div id="constructors" ng-repeat="constructor in constructors">
   <img src="img/flags/{{constructor.nationality}}.png" />
   <h2 id="constructor">{{constructor.name}}</h2>
   <h3 ng-if="constructor.name == 'McLaren'" id="foundYear">1963</h3>
</div>

Or something similar.

You could also use the name as part of the ID of the H3 and then just access the item directly

<...id="foundYear-{{constructtor.name}}"....>

jQuery('#foundYear-McLaren').append...

If you have a bunch of years to put in for various items you should really just augment the received data in the controller to add a year field and then use

and it will fill in whichever ones have a year.

Thank you my friend. I already got it working with your advice. — Klisee, Sep 09 '14 at 17:56

score 0 · Answer 2 · answered Sep 09 '14 at 17:53

<div id="constructors" ng-repeat="constructor in constructors">
<div class="wrapper">
<img src="img/flags/{{constructor.nationality}}.png" />
<h2 class="constructor-name">{{constructor.name}}</h2>
<h3 class="foundYear"></h3>
</div>
</div>

$(document).ready(function(){
  $('#constructor .wrapper').each(function(){
    if($(this).find(.constructor-name).text() === "McLaren"){
        $(this).find('.foundYear').html('1963')
    }
    });
    });

Please note - 1. Inside a loop dont declare static ID. 2. DOnt use append, Instead use .html()

Loading a list from API with Angular (ng-repeat), then add some additional information with jQuery

2 Answers2

{{constructor.year}}