JSFiddle - React, Tailwind, and code Playground

by javiros

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<body ng-app>
  <div ng-controller="Ctrl">
      <table border = "1">
          <tr ng-repeat="t in users">
              <td>{{t.id}}</td>
              <td>{{t.username}}</td>
              <td>{{t.genre}}</td>
              <td ng-repeat="typ in genre | filter:t.genre">{{typ.name}}</td>
          </tr>
      </table>
      <!-- {{genre}} -->
  </div>
</body>

JavaScript

function Ctrl($scope) {
  $scope.users = [
    {"id":1,"username":"simon","genre":"10"},
    {"id":8,"username":"betty","genre":"20"},
    {"id":14,"username":"archie","genre":"30"},
    {"id":3,"username":"jumbo1","genre":"40"},
  ];
    
   $scope.genre = [
    {"id":10,"name":"jazz",},
    {"id":20,"name":"rock",},
    {"id":30,"name":"classic",},
    {"id":40,"name":"metal"},
  ];
}