Как отфильтровать и сгруппировать данные по имени, используя angularjs? - PullRequest
Новая
       12

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

0 голосов
/ 24 февраля 2020

У меня есть следующий список описаний, которые относятся к каждому имени. Пожалуйста, дайте мне знать, как я могу сгруппировать или перечислить описания по имени.

html: 

<body ng-app="app" ng-controller="MainCtrl">

    <div ng-repeat="nameGroup in loopData"> <!-- this ng-repeat should be available as per my requirement -->
        <div ng-repeat="loopData in nameGroup.values track by $index" ><!-- this ng-repeat should be available as per my requirement -->

    <!-- {{loopData}} -->
        <div class="text-center merged">{{loopData.name}}</div><!-- ng-if="$index === 0" -->
        <div class="text-center">{{loopData.description}}</div> 

     </div>
     </div>
</body>

контроллер: 

var app = angular.module('app', ['angular.filter']);

app.controller('MainCtrl', function($scope) {
  $scope.finalLoopData = {};

  $scope.loopData = [{ "country":"Abc", "id":"001", "mynumbers":[], 
    "values": [
      {"description": "first desc", "name": "First Test Name"},
      {"description": "second desc", "name": "First Test Name"},
      {"description": "third desc", "name": "First Test Name"},
      {"description": "fourth desc", "name": "Second Test Name"},
      {"description": "fifth desc", "name": "Second Test Name"},
      {"description": "sixth desc", "name": "Third Test Name"},
      {"description": "seventh desc", "name": "Third Test Name"},
      {"description": "eighth desc", "name": "Third Test Name"},
      {"description": "ninth desc", "name": "Third Test Name"},
      {"description": "tenth desc", "name": "Third Test Name"},
      {"description": "eleventh desc", "name": "Fourth Test Name"},
      {"description": "twelfth desc", "name": "Fourth Test Name"}
    ]
  }];

  $scope.arrayToObject = function () {
    var finalLoopData = {};
    angular.forEach($scope.loopData[0].values, function (value, key) {
        //console.log(value);//gives all value objects
        if (!finalLoopData[value.name]) { 
             finalLoopData[value.name] = new Array();
             //console.log("name: "+value.name);//First Test Name //Second Test Name //Third Test Name //Fourth Test Name
        }
        finalLoopData[value.name].push(value);
    });
    $scope.finalLoopData = finalLoopData;
  }
  $scope.arrayToObject();
});

Если я запускаю этот код, я получаю индивидуальное описание с именами, но не с именами групп, Вот мой ожидаемый результат похож на ниже:

Имя первого теста

  • первый дес c

  • второй дес c

  • третий дес c

Имя второго теста

  • четвертый дес c

  • пятый дес c

Третье название теста

  • шестой дес c

  • седьмой дес c

  • восьмой дес c

  • девятый дес c

  • десятый дес c

Четвертое название теста

  • одиннадцатый дес c

  • двенадцатый дес c

Создано Фильтр :

1 Ответ

2 голосов
/ 24 февраля 2020

Обновлено

Если вы не можете изменить циклы в шаблоне, рассмотрите следующее:

Шаблон 

<body ng-app="app" ng-controller="MainCtrl">
  <!-- Original loops -->
  <div ng-repeat="nameGroup in loopData">
    <div ng-repeat="loopData in nameGroup.values track by $index">

      <!-- Data name -->
      <strong>{{loopData.name}}</strong>

      <!-- Loop data descriptions -->
      <ul ng-repeat="description in loopData.descriptions">
        <li>{{description}}</li>
      </ul>

    </div>
  </div>
</body>

Контроллер 

var app = angular.module('app', ['angular.filter']);

app.controller('MainCtrl', function($scope) {

  $scope.loopData = [
    {
      country: "Abc",
      id: "001",
      mynumbers: [],
      values: [
        { description: "first desc", name: "First Test Name" },
        { description: "second desc", name: "First Test Name" },
        { description: "third desc", name: "First Test Name" },
        { description: "fourth desc", name: "Second Test Name" },
        { description: "fifth desc", name: "Second Test Name" },
        { description: "sixth desc", name: "Third Test Name" },
        { description: "seventh desc", name: "Third Test Name" },
        { description: "eighth desc", name: "Third Test Name" },
        { description: "ninth desc", name: "Third Test Name" },
        { description: "tenth desc", name: "Third Test Name" },
        { description: "eleventh desc", name: "Fourth Test Name" },
        { description: "twelfth desc", name: "Fourth Test Name" }
      ]
    }
  ];

  this.$onInit = function() {
    $scope.loopData.forEach(function(data) {
      const groupedValues = {};

      // group values by name
      data.values.forEach(function(value) {
        // initialize name group
        if (!groupedValues[value.name]) {
          groupedValues[value.name] = {
            name: value.name,
            descriptions: []
          };
        }

        // add description to name group
        groupedValues[value.name].descriptions.push(value.description);
      });

      // update values
      data.values = Object.values(groupedValues);
    });
  };

});

Обратите внимание, что функция $onInit преобразует $scope.loopData в следующее: 

[
  {
    "country": "Abc",
    "id": "001",
    "mynumbers": [],
    "values": [
      {
        "name": "First Test Name",
        "descriptions": [
          "first desc",
          "second desc",
          "third desc"
        ]
      },
      {
        "name": "Second Test Name",
        "descriptions": [
          "fourth desc",
          "fifth desc"
        ]
      },
      {
        "name": "Third Test Name",
        "descriptions": [
          "sixth desc",
          "seventh desc",
          "eighth desc",
          "ninth desc",
          "tenth desc"
        ]
      },
      {
        "name": "Fourth Test Name",
        "descriptions": [
          "eleventh desc",
          "twelfth desc"
        ]
      }
    ]
  }
]

Исходный ответ

In ваш html вы не зацикливаетесь на обработанной переменной finalLoopData. Кроме того, чтобы отобразить название группы один раз, оно должно быть указано в первом l oop (не во втором).

Рассмотрим следующий код:

Шаблон 

<body ng-app="app" ng-controller="MainCtrl">
  <!-- Loop final data -->
  <div ng-repeat="nameGroup in finalLoopData">

    <!-- Group name -->
    <strong>{{nameGroup.name}}</strong>

    <!-- Loop group descriptions -->
    <ul ng-repeat="description in nameGroup.descriptions track by $index">
      <li>{{description}}</li>
    </ul>

  </div>
</body>

Контроллер 

var app = angular.module('app', ['angular.filter']);

app.controller('MainCtrl', function($scope) {

  $scope.finalLoopData = {};

  $scope.loopData = [
    {
      country: "Abc",
      id: "001",
      mynumbers: [],
      values: [
        { description: "first desc", name: "First Test Name" },
        { description: "second desc", name: "First Test Name" },
        { description: "third desc", name: "First Test Name" },
        { description: "fourth desc", name: "Second Test Name" },
        { description: "fifth desc", name: "Second Test Name" },
        { description: "sixth desc", name: "Third Test Name" },
        { description: "seventh desc", name: "Third Test Name" },
        { description: "eighth desc", name: "Third Test Name" },
        { description: "ninth desc", name: "Third Test Name" },
        { description: "tenth desc", name: "Third Test Name" },
        { description: "eleventh desc", name: "Fourth Test Name" },
        { description: "twelfth desc", name: "Fourth Test Name" }
      ]
    }
  ];

  this.$onInit = function() {
    const finalLoopData = {};
    $scope.loopData[0].values.forEach(function(item) {
      // initialize name group
      if (!finalLoopData[item.name]) {
        finalLoopData[item.name] = {
          name: item.name,
          descriptions: []
        };
      }

      // add description to name group
      finalLoopData[item.name].descriptions.push(item.description);
    });

    // apply results
    $scope.finalLoopData = finalLoopData;
  };

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

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

...