Отображение данных JSON с помощью Angular DataTable

Я использую Angular DataTable для отображения данных с помощью массива JSON, но данные не отображаются. Я думаю, что есть проблема с моей HTML-страницей. Вы можете найти проблему?

HTML файл:

   <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>

Это часть HTML-страницы:

МОЙ формат данных JSON:

$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"
}

]; }

Может ли ваша проблема быть в том, что userList на самом деле не является списком или пользователями, а скорее является объектом JS с единственным свойством с именем InvoiceHeaders, значением которого является список пользователей?

moilejter 27.10.2018 06:13

Я пытаюсь использовать пример с данными в своем проекте.

gihankumara 27.10.2018 06:14

Попробуйте установить $ scope.userList = [{"name": "Tiger", ...}, {"name": "Garret", ..}]; ...

moilejter 27.10.2018 06:18

скопируйте и вставьте свой JSON-код в jsonlint.com, вы должны удалить завершающий; после ]

James Martinez 27.10.2018 06:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
383
1

Ответы 1

Ваш JSON недействителен, измените его как

{
  "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"
    }
  ]
}

ДЕМО

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>

Другие вопросы по теме