1

I am using an Angular DataTable to display data using a JSON array but the data did not display. I think there is an issue with my HTML page. Can you find the issue?

HTML file:

 <tbody>
 <tr ng-repeat="user in userList">
 <td><a class="green shortinfo" href="javascript:;" ng-click="childInfo(user, $event)" title="Click to view more"><i class="glyphicon glyphicon-plus-sign"></a></td>
 <td>{{user.name}}</td>
 <td>{{user.position}}</td>
 <td>{{user.office}}</td>
 <td><div class="btn-group">
 <button type="button" class="btn btn-default btn" ng-click="edit($index);"><i class="glyphicon glyphicon-pencil"></i></button> 
 <button type="button" class="btn btn-default btn" ng-click="delete();"><i class="glyphicon glyphicon-trash"></i></button> 
 </div></td>
 </tr>
</tbody>

This is part of the HTML page:

MY JSON data format:

$scope.userList = {"InvoiceHeaders":[
{
 "name": "Tiger Nixon",
 "position": "System Architect",
 "salary": "320,800ドル",
 "start_date": "2011/04/25",
 "office": "Edinburgh",
 "extn": "5421"
},
{
 "name": "Garrett Winters",
 "position": "Accountant",
 "salary": "170,750ドル",
 "start_date": "2011/07/25",
 "office": "Tokyo",
 "extn": "8422"
}

]; }

asked Oct 27, 2018 at 4:05
4
  • Would your problem be that userList is not actually a list or users, but rather a JS object with a single property named InvoiceHeaders whose value is a list of users? Commented Oct 27, 2018 at 4:13
  • i am trying to use datatable example to my project. Commented Oct 27, 2018 at 4:14
  • Try setting $scope.userList = [ { "name" : "Tiger", ... }, { "name" : "Garret", .. } ]; ... Commented Oct 27, 2018 at 4:18
  • copy and paste your JSON code to jsonlint.com, you should remove the trailing ; after ] Commented Oct 27, 2018 at 4:21

1 Answer 1

1

Your JSON is not valid , change it as,

{
 "InvoiceHeaders": [
 {
 "name": "Tiger Nixon",
 "position": "System Architect",
 "salary": "320,800ドル",
 "start_date": "2011/04/25",
 "office": "Edinburgh",
 "extn": "5421"
 },
 {
 "name": "Garrett Winters",
 "position": "Accountant",
 "salary": "170,750ドル",
 "start_date": "2011/07/25",
 "office": "Tokyo",
 "extn": "8422"
 }
 ]
}

DEMO

var myApp = angular.module('testApp',[]);
myApp.controller('myCtrl',function($scope){
$scope.userList = {
 "InvoiceHeaders": [
 {
 "name": "Tiger Nixon",
 "position": "System Architect",
 "salary": "320,800ドル",
 "start_date": "2011/04/25",
 "office": "Edinburgh",
 "extn": "5421"
 },
 {
 "name": "Garrett Winters",
 "position": "Accountant",
 "salary": "170,750ドル",
 "start_date": "2011/07/25",
 "office": "Tokyo",
 "extn": "8422"
 }
 ]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="myCtrl">
<ul ng-repeat="user in userList.InvoiceHeaders">
 <li>{{user.name}}</li>
 <li>{{user.position}}</li>
 <li>{{user.office}}</li>
 <td>
 </ul>
</body>

answered Oct 27, 2018 at 5:21
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.