I am currently working on handling a large JSON file and displaying it using ng-repeat. However, I encountered a problem where I need to split the 'abilities' item and present it in a table format. I tried using a filter to divide the string into an array, but I am struggling to display a selected element from the resulting array.
Desired outcome: for the first object (CSS not included)
<abilities-block>
<table>
<tbody>
<tr>
<th>STR</th>
<th>DEX</th>
<th>CON</th>
<th>INT</th>
<th>WIS</th>
<th>CHA</th>
</tr>
<tr>
<td id="str">10</td>
<td id="dex">14</td>
<td id="con">10</td>
<td id="int">11</td>
<td id="wis">12</td>
<td id="cha">11</td>
</tr>
</tbody>
</table>
</abilities-block>
I have attached a codepen link and a lengthy snippet, apologies for the inconvenience.
Thank you for any assistance
var app = angular.module('app', []);
app.controller('controller', function($scope, $http) {
$scope.allmonsters = {
"monsters": [ {
... (omitted for brevity)
}]
}
});
angular.module('app')
.filter('splitabilitiesfilter', function() {
return function(input, scope) {
var res = input.split(" ")
return res;
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<MMsheets ng-repeat="x in allmonsters.monsters">
<abilities-block>
<table>
<tbody>
<tr>
<th>STR</th>
<th>DEX</th>
<th>CON</th>
<th>INT</th>
<th>WIS</th>
<th>CHA</th>
</tr>
<tr>
<td id="str">{{x.abilities|splitabilitiesfilter:scope}}</td>
<td id="dex">11 (+0)</td>
<td id="con">13 (+1)</td>
<td id="int">1 (–5)</td>
<td id="wis">3 (–4)</td>
<td id="cha">1 (–5)</td>
</tr>
</tbody>
</table>
</abilities-block>
</mmsheets>
<div>