A guide on organizing and categorizing data by name with angularjs

Question

A guide on organizing and categorizing data by name with angularjs

Presented here is a list of descriptions associated with specific names. I am seeking guidance on how to group or list the descriptions by name.

html:

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

    <div ng-repeat="nameGroup in loopData"> <!-- Scope for this ng-repeat should be customizable -->
        <div ng-repeat="loopData in nameGroup.values track by $index" ><!-- Scope for this ng-repeat should be customizable -->

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

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

controller:

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) {
        if (!finalLoopData[value.name]) { 
             finalLoopData[value.name] = new Array();
        }
        finalLoopData[value.name].push(value);
    });
    $scope.finalLoopData = finalLoopData;
  }
  $scope.arrayToObject();
});

Upon executing the code, individual descriptions with names are generated. However, my desired output should resemble the following:

First Test Name

first desc
second desc
third desc

Second Test Name

fourth desc
fifth desc

Third Test Name

sixth desc
seventh desc
eighth desc
ninth desc
tenth desc

Fourth Test Name

eleventh desc
twelfth desc

Developed Filter:

javascript angularjs filter angularjs-ng-repeat grouping

Answer 1

Answer №1

Refreshed Version

If modifying the loops in the template is not feasible, you can try the following alternative approach:

Template Adjustment

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

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

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

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

Controller Update

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 based on 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);
    });
  };

});

Note that the $onInit method will transform $scope.loopData into the new structure as shown below:

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

Initial Response

In your HTML code, you need to iterate over the processed variable finalLoopData. Additionally, to display the group name once, it should be included in the primary loop rather than the secondary loop.

You may consider utilizing the following snippets:

Adjusted Template

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

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

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

  </div>
</body>

Update in Controller

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) {
      // Initializing name group
      if (!finalLoopData[item.name]) {
        finalLoopData[item.name] = {
          name: item.name,
          descriptions: []
        };
      }

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

    // Applying the changes
    $scope.finalLoopData = finalLoopData;
  };

});

Answer 2

Refreshed Version

If modifying the loops in the template is not feasible, you can try the following alternative approach:

Template Adjustment

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

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

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

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

Controller Update

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 based on 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);
    });
  };

});

Note that the $onInit method will transform $scope.loopData into the new structure as shown below:

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

Initial Response

In your HTML code, you need to iterate over the processed variable finalLoopData. Additionally, to display the group name once, it should be included in the primary loop rather than the secondary loop.

You may consider utilizing the following snippets:

Adjusted Template

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

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

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

  </div>
</body>

Update in Controller

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) {
      // Initializing name group
      if (!finalLoopData[item.name]) {
        finalLoopData[item.name] = {
          name: item.name,
          descriptions: []
        };
      }

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

    // Applying the changes
    $scope.finalLoopData = finalLoopData;
  };

});

A guide on organizing and categorizing data by name with angularjs

Answer №1

Refreshed Version

Initial Response

Similar questions

"I'm encountering an issue with the discord.js module when I try to launch my bot using node. Any ideas on how

The issue with Three.Js Raycasting arises when attempting to change camera transformations within an Object3D parent element

What could be the reason for the esm loader not recognizing my import?

What is the process for selecting the default option in a drop-down menu?

UI is experiencing lag issues post Alert invocation in React Native

Event handler assigned to a group of constantly changing elements

Controlling the Quantity of Selected Checkboxes with JavaScript

What is the most effective method for displaying two external web pages next to each other?

Can LocalStorage be deleted when the application is not running?

Leverage JSON data from an API within JavaScript, sourced and accessed through PHP

Transforming JSON data into a visual flowchart using VUE.js

Graph is not showing up when navigating through page

Issue: The DLL initialization routine failed for electron, but it works perfectly fine on node.js

What is the process of sending a modified array as text to TextEdit?

Drawbacks of adjusting design according to screen width via javascript detection

Sharing AngularJs controllers between different modules can help streamline your

Steps to turn off sourcemaps in the @sentry/nextjs package

Why bother re-rendering components in React that haven't had any changes in their state?

What is the best way to access a custom object in JavaScript that was created in a different function?

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces