JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <table>
        <tr ng-repeat="item in orderedTemplate"><td>{{item}}</td><td>{{response.Kind[item].color}}</td><td>{{response.Kind[item].size}}</td><td>{{response.Kind[item].shape}}</td></tr>
        
    </table>
    
    <table>
    <tr ng-repeat="(type, attributes) in response.Kind">
  <td>{{ type }}</td><td>{{ attributes.shape }}</td>
</tr>
    </table>

</div>

JavaScript

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

myApp.controller("myController", function($scope){
    $scope.response = {
        "Kind": {
            "Food": {
                "color": "0",
                "size": "31",
                "shape": "round"
            },
            "Drink": {
                "color": "0",
                "size": "34",
                "shape": "square"
            },
            "Condiments": {
                "color": "0",
                "size": "52",
                "shape": "rectangle"
            }
        }
    }
    
    $scope.orderedTemplate = ["Food", "Drink", "Condiments"];
    
     $scope.list = [
        {
            "Kind": "Food",
            "shape": "round"
        }, {
            "Kind": "Drink",
            "shape": "square"
        }, {
            "Kind": "Condiments",
            "shape": "rectangle"
        }]
});