I am attempting to display specific values from an array of objects based on the current URL. For example, if the URL is "localhost/#/scores/javelin," I only want to display the javelin scores from my array.
Here is an example of what my array looks like:
$scope.ppl =
[
{
firstname: 'Donald',
lastname: 'Trump',
from: 'USA',
run100m: ['1s','2s','3s'],
javelin: ['50m','20m','44m']
},
{
firstname: 'Foo',
lastname: 'Bar',
from: 'SWE',
run100m: ['1s','2s','3s'],
javelin: ['80m','10m','54m']
},
];
There are over 15 types of sports and an unknown number of people in the array. I am struggling to find a solution that doesn't involve creating numerous arrays. I have tried various approaches but have not had success.
This is how my repeat function currently looks:
<tr ng-repeat="x in ppl">
<td>{{x.firstname}}</td>
<td>{{x.lastname}}</td>
<td>{{x.from}}</td>
<td><span ng-repeat="y in x.run100m track by $index">{{ y }}</span>
</td>
<td><button>edit</button></td>
</tr>
Currently, this code only works with the "run100m" values. If the URL is changed to "/javelin," I want the javelin scores to be displayed inside the span tag.
The only solution I have found is to create:
<span ng-show=" URL == javelin"></span>
However, I am uncertain if this is the most efficient approach. My question is, how can I achieve this in a more efficient manner? The structure of "ppl" does not necessarily need to remain the same, but it would be ideal if all the information could be stored in a single variable.
Additionally, I want the repeat to be based on the variable:
var path = $routeParams.sport;