I am looking to showcase the batters and their statistics from a JSON file for my team in a table using AngularJS.
HTML:
<table class="table" ng-controller="players">
<tr ng-repeat="x in player | orderBy:orderByField:reverseSort">
<td>{{x.player_name}}</td>
<td>{{x.components.B_OBP}}</td>
<td>{{x.components.B_K%}}</td>
</tr>
</table>
JS:
var baseballApp = angular.module('baseballApp', []);
baseballApp.controller('Players', function ($scope, $http) {
$scope.message = 'Players';
$http.get('http://example.com/myteam.json').then(function (response) {
$scope.player = response.data;
});
});
JSON:
{
"player_name": "Mookie Betts",
"positions": {
"PR": 0,
"LF": 0,
"C": 0,
"DH": 0,
"SS": 0,
"CF": 0,
"P": 0,
"RF": 53,
"1B": 0,
"2B": 0,
"3B": 0,
"PH": 0
},
"handedness": {
"bats": "R",
"throws": "R"
},
"player_type": "b",
"components": {
"B_OPS": ".882",
"B_SLG": ".516",
"B_BSR": "3.6",
"B_TEAM": "",
"B_PA": "643",
"B_3B": "4",
"B_RBI": "94",
"B_AB": "581",
"B_R": "95",
"B_2B": "38",
"B_BB": "51",
"B_ISO": ".206",
"B_UBR": "3.5",
"B_WOBA": ".375",
"B_GDP": "",
"B_H": "180",
"B_SEASON": "2017",
"B_SO": "71",
"B_SH": "3",
"B_WGDP": "",
"B_SPD": "5.5",
"B_SF": "5",
"B_IBB": "1",
"B_SB": "21",
"B_G": "145",
"B_WSB": "0.1",
"B_BB/K": "0.72",
"B_AVG": ".310",
"B_CS": "9",
"B_OFF": "28.4",
"B_WRC+": "132",
"B_HR": "25",
"B_K%": "0.111",
"B_WAR": "5.6",
"B_BB%": "0.08",
"B_BABIP": ".317",
"B_1B": "113",
"B_HBP": "3",
"B_WRAA": "30.2",
"B_WRC": "106",
"B_DEF": "4.1",
"B_OBP": ".366"
},
"player_id": "13611"
},
Despite most stats displaying correctly, I encounter an issue with stats containing special characters like B_K% or B_WRC+
This is the error I am getting:
Unexpected end of expression: x.components.B_K%
I tried different ways to escape the special character, like
{{x.components.["B_K%"]}}, but it doesn't seem to work.
Any suggestions on how to solve this?