Question

我是角色新手，需要以下方面的帮助 - 我的json文件中有一个json数据：

{
  "records":
  [
    {
    "date":1619038000,
    "name":"Susan",
    "status":"available"
  },
  {
    "date":1419038000,
    "name":"Vinay",
    "status":"not available"
  },
  {
    "date":1419038000,
    "name":"Ajay",
    "status":"available"
  }
  ],
  "record2":[
    {
    "date":1419037000,
    "name":"Soumya",
    "status":"not available"
  },
  {
    "date":1326439320,
    "name":"Harsh",
    "status":"available"
  },
  {
    "date":1419031000,
    "name":"Gopi",
    "status":"available"
  }
  ]
}

这是我的js文件：

   angular.module("myApp",[]).controller("Control",function($scope,$http){
      $http.get('myData.json').
      success(function(data){
        $scope.tableData = data.records;

      });
    });

我想从json中显示表格中的数据，以便将具有相同“日期”的所有数据组合在一起并在表格中显示jst一个日期。请你帮我解决这个问题。我想要它如下：

日期名称状态 4月16日苏珊可用 4月17日vinay不可用 ajay available

Answer 1

要显示结果：GroupBy日期，请按照以下步骤操作。

步骤1：将Moment JS库添加到HTML文件中。

http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js

步骤2：更新您的控制器文件，如下所示：

  var app = angular.module("myApp",[]);

 app.controller("Control",function($scope,$http){
   $http.get('myData.json').
       success(function(data){
                  $scope.tableData = data.records;
                });
});
app.filter('groupBy', function() {
  return _.memoize(function(items, field) {
        return _.groupBy(items, field);
    }
  );
});

步骤3：要呈现数据，请将以下代码添加到HTML文件中。

<ul>
        <li ng-repeat="(date, persons) in tableData | groupBy:'date'">
                {{date * 1000 | date:"dd.MM.y"}}
                <ul>
                    <li ng-repeat="person in persons">
                        {{person.name}}
                    </li>
                </ul>
            </li>
 </ul>

Codepen Link

Answer 2

你需要使用'ng-repeat' 以下是您的指南的教程和示例 https://www.w3schools.com/angular/ng_ng-repeat.asp

到目前为止，这里有一些指导 https://www.w3schools.com/angular/ng_filter_date.asp

循环遍历json对象数组以显示包含其所有数据的唯一属性

2 个答案: