I am facing an issue with extracting data from an external JSON file for my application. Although most of the data loads into a DataTables table successfully, I am encountering problems with the $scope variable since it is referencing external data. Specifically, I need to find a way to load the remaining data without using $scope.status[i] and $scope.errorCode[i]. Any suggestions on how I can achieve this?
Here is a snippet of my JSON code:
"status" : [
{"id": 1, "name": "Active"},
{"id": 2, "name": "Inactive"},
{"id": 3, "name": "Unknown"}
],
"errorCode" : [
{"id": 1, "name": "Code01"},
{"id": 2, "name": "Code02"},
{"id": 3, "name": "Code03"},
{"id": 4, "name": "Code04"}
],
"apps" : [
{"appName": "App01",
"dateCreated": "01/01/2015",
"dateUpdated": "01/04/2015",
"payload": "Payload01",
"status": "$scope.status[0]",
"errorCode": "$scope.errorCode[0]",
"errorDesc": "Desc01",
"recordCount": 1,
"recordFail": 1},
{"appName": "App01",
"dateCreated": "01/02/2015",
"dateUpdated": "01/05/2015",
"payload": "Payload02",
"status": "$scope.status[0]",
"errorCode": "$scope.errorCode[1]",
"errorDesc": "Desc02",
"recordCount": 1,
"recordFail": 2},
{"appName": "App03",
"dateCreated": "01/03/2015",
"dateUpdated": "01/06/2015",
"payload": "Payload03",
"status": "$scope.status[1]",
"errorCode": "$scope.errorCode[2]",
"errorDesc": "Desc03",
"recordCount": 2,
"recordFail": 1}
The following HTML snippet is used to call the JSON data:
<table id="myTable" class="table display">
<thead>
<tr>
<th ng-repeat="(i, th) in head" value="{{th.id}}" class="{{th.class}}"><span>{{th.name}}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps | filter:search" ng-click="clickRow(app)" ng-class="{selected: app === selectedRow}">
<td>{{app.appName}}</td>
<td>{{app.dateCreated}}</td>
<td>{{app.dateUpdated}}</td>
<td>{{app.payload}}</td>
<td>{{app.status.name}}</td>
<td>{{app.errorCode.name}}</td>
<td>{{app.errorDesc}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<th ng-repeat="(i, th) in head" value="{{th.id}}"><span>{{th.name}}</span></th>
</tr>
</tfoot>
</table>
Furthermore:
<table class="table display">
<thead>
<tr>
<th ng-repeat="(i, th) in details" value="{{th.id}}"
class="{{th.class}}"><span>{{th.name}}</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{selectedRow.appName}}</td>
<td>{{selectedRow.errorDesc}}</td>
<td>{{selectedRow.recordCount}}</td>
<td>{{selectedRow.recordFail}}</td>
</tr>
</tbody>
</table>
Your insights are valuable!