JSFiddle - React, Tailwind, and code Playground

by mavdhana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
    
    <div ng-repeat="nameGroup in finalLoopData">{{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>

CSS

.merged{
    width:50%;
    height:50%;
	  background: red;
	}

JavaScript

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

});