Как напечатать массив в табличном формате, используя angularjs? - PullRequest
Новая
       3

Как напечатать массив в табличном формате, используя angularjs?

0 голосов
/ 04 июля 2019

Я вызываю API и хочу напечатать свой результат JSON в табличном формате, используя anugularjs.Итак, я объявил жестко закодированный массив (train) в функции (myfunc).Теперь я хочу напечатать массив в формате таблицы.Вот код, который я попробовал: 

function myfunc() {
  var train = [{
      "TrainNo": "11043",
      "TrainName": "MADURAI EXPRESS",
      "Source": "LTT",
      "ArrivalTime": "03:50",
      "Destination": "PUNE",
      "DepartureTime": "00:15",
      "TravelTime": "03:35H",
      "TrainType": "EXP"
    },
    {
      "TrainNo": "16533",
      "TrainName": "BGKT SBC EXPRES",
      "Source": "KYN",
      "ArrivalTime": "04:10",
      "Destination": "PUNE",
      "DepartureTime": "01:05",
      "TravelTime": "03:05H",
      "TrainType": "EXP"
    }
  ];
}
myfunc();
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
  $scope.names = train;
});
<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  
  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body>

  <div ng-app="myApp" ng-controller="Ctrl">

    <table>
      <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Department</th>
      </tr>
      <tr ng-repeat="x in names">

        <td>{{x.TrainName}}</td>
        <td>{{x.TrainName}}</td>
        <td>{{x.Source}}</td>
        <td>{{x.Class}}</td>
        <td>{{ x.Department}}</td>
      </tr>
    </table>

  </div>

</body>

</html>

Я пробовал этот код, но все еще не могу вставить данные в таблицу.

Ответы [ 2 ]

1 голос
/ 04 июля 2019

обо всем по порядку.Вы объявили свою переменную train в своей функции, поэтому не можете получить к ней доступ к своему контроллеру.Не очень хорошая идея сделать его глобальной переменной.Поскольку вы используете angularjs, вы можете использовать одну из его основных функций под названием service (см. Это в моем коде ниже и посмотрите, как я его использую) .

Во-вторых, вы всегда должны делать так, чтобы ваш <th> считал так же, как ваш <td>.В вашем коде у вас есть 3 <th> и 5 <td>

В-третьих, вы вызываете свойства, которые не объявлены в вашем объекте.Всегда используйте свойства, которые вы объявили в своем объекте.

Вы можете запустить мой код ниже, чтобы проверить правильность вывода 

  
  var app = angular.module('myApp', []);
  
  app.service('TrainService', function() {
    var train = [{
        "TrainNo": "11043",
        "TrainName": "MADURAI EXPRESS",
        "Source": "LTT",
        "ArrivalTime": "03:50",
        "Destination": "PUNE",
        "DepartureTime": "00:15",
        "TravelTime": "03:35H",
        "TrainType": "EXP"
      },
      {
        "TrainNo": "16533",
        "TrainName": "BGKT SBC EXPRES",
        "Source": "KYN",
        "ArrivalTime": "04:10",
        "Destination": "PUNE",
        "DepartureTime": "01:05",
        "TravelTime": "03:05H",
        "TrainType": "EXP"
      }
    ];
    
    return { getTrain: getTrain };
    
    function getTrain() {
      return train;
    }
  });
  
  app.controller('Ctrl', function($scope, TrainService) {
    $scope.names = TrainService.getTrain();
  });

    
<!DOCTYPE html>
    <html>
    <style>
      table,
      th,
      td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
      }
      
      table tr:nth-child(odd) {
        background-color: #f1f1f1;
      }
      
      table tr:nth-child(even) {
        background-color: #ffffff;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.0.0.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>

    <body>

      <div ng-app="myApp" ng-controller="Ctrl">

        <table>
          <tr>
            <th>TrainNo</th>
            <th>Name</th>
            <th>Source</th>
            <th>Destination</th>
            <th>TrainType</th>
          </tr>
          <tr ng-repeat="x in names">

            <td>{{x.TrainNo}}</td>
            <td>{{x.TrainName}}</td>
            <td>{{x.Source}}</td>
            <td>{{x.Destination}}</td>
            <td>{{x.TrainType}}</td>
          </tr>
        </table>

      </div>

    </body>

    </html>
0 голосов
/ 04 июля 2019

Вот, пожалуйста. Ваша переменная train не доступна внутри контроллера, так как она доступна только внутри myFunc, поскольку переменные имеют область действия функции в javascript. Ниже приведен фрагмент кода, который работает. Подробнее о объеме JavaScript здесь 

var train=[
{
"TrainNo": "11043",
"TrainName": "MADURAI EXPRESS",
"Source": "LTT",
"ArrivalTime": "03:50",
"Destination": "PUNE",
"DepartureTime": "00:15",
"TravelTime": "03:35H",
"TrainType": "EXP"
}
,
{
"TrainNo": "16533",
"TrainName": "BGKT SBC EXPRES",
"Source": "KYN",
"ArrivalTime": "04:10",
"Destination": "PUNE",
"DepartureTime": "01:05",
"TravelTime": "03:05H",
"TrainType": "EXP"
}];

var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope){
 $scope.names=train;   
});
<!DOCTYPE html>
<html>
<style>
table, th , td  {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script
src="https://code.jquery.com/jquery-3.0.0.js"> </script>
<script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
</script>

<body>

<div ng-app="myApp" ng-controller="Ctrl"> 

<table>
  <tr>
  <th>Name</th>
  <th>Class</th>
  <th>Department</th>
  </tr>
  <tr ng-repeat="x in names" >

   <td>{{x.TrainName}}</td>
   <td>{{x.TrainName}}</td> 
   <td>{{x.Source}}</td> 
   <td>{{x.Class}}</td>
   <td>{{ x.Department}}</td>
 </tr>
 </table>

</div>

</body>
</html>

Надеюсь, это поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...