JSFiddle - React, Tailwind, and code Playground

by st3fan

HTML

<body ng-app="demoApp" ng-controller="demoController">
    <h2>{{heading}}</h2>
    Cart: {{ currentCart.name }}
    
    <table>
        <thead>
            <tr>
                <th colspan="3"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="article in currentCart.articles">
                <td>{{$index + 1}}</td>
                <td>{{article.name}}</td>
                <td>{{article.quantity}}</td>
            </tr>
        </tbody>
    </table>
</body>

JavaScript

(function() {

    //'use strict';
    
    
    // Models
    var models = angular.module('models', []);
    
    models.factory('Cart', function() {
        
        // Constructor
        function Cart(name, articles) {
            this.name = name;
            this.articles = articles || [];
        }
        
        // Public method
        Cart.prototype.isEmpty = function () {
            return !this.articles.length;
        };
        
        // Static method
        Cart.build = function(data) {
            console.log('Cart.build', arguments); // DEBUG
            return new Cart(data.name, data.articles);
        };
        
        Cart.apiResponseTransformer = function (responseData) {
            console.log('Cart.apiResponseTransformer', arguments); // DEBUG
            //responseData = responseData[0].data || responseData[0].config.data;
            
            if (angular.isArray(responseData)) {
                return responseData
                  .map(Cart.build)
                  .filter(Boolean);
            }

            return Cart.build(responseData);
        };
        
        return Cart;
    });
    
    models.factory('CartArticle', function() {
        
        // Constructor
        function CartArticle(name, quantity) {
            this.name = name;
            this.quantity = quantity;
        }
        
        CartArticle.build = function(data) {
            return new CartArticle(data.name, data.quantity);
        };
        
        CartArticle.apiResponseTransformer = function (responseData) {
            if (angular.isArray(responseData)) {
                return responseData
                  .map(CartArticle.build)
                  .filter(Boolean);
            }
            return CartArticle.build(responseData);
        };
        
        return CartArticle;
        });
    
    
    // Services
    var services = angular.module('services', []);
    
    services.service('API', ['$http', function($http) {
     ...