JSFiddle - React, Tailwind, and code Playground

by st3fan

HTML

<script type="text/javascript" src="/js/vendor/underscore-min.js"></script>
    <script type="text/javascript" src="/js/vendor/angular/angular.js"></script>

<div id="demo" ng-app="BucketShopApp">
    
    <div ng-controller="ArticleListController">
        <ul>
            <li ng-repeat="article in articles">
                {{article.name}}
            </li>
        </ul>
    </div>

</div>

JavaScript

// app.js
        angular.module('BucketShopApp', [ 'BucketShopApp.controllers', 'BucketShopApp.services' ]);


        // controllers.js
        angular.module('BucketShopApp.controllers', [])
            .controller('ArticleListController', function($scope, bucketShopService) {

                $scope.articles = [
//                    {
//                        'articleId': 'A',
//                        'name': 'Begränsad hastighet 200 kbit/s'
//                    },
//                    {
//                        'articleId': 'B',
//                        'name': 'Extra data 1 GB'
//                    },
//                    {
//                        'articleId': 'C',
//                        'name': 'Extra data 3 GB'
//                    }
                ];

                bucketShopService.getDrivers()
                    .success(function(response) {
                        console.log(arguments); // DEBUG

                        var driverStandings = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

                        $scope.articles = _.map(driverStandings, function(driver) {
                            return { articleId: driver.position, name: driver.Driver.familyName };
                        });
                        console.log($scope.articles);
                    })
                    .error(function() {
                        console.log(arguments); // DEBUG
                    });

            });


        // services.js
        angular.module('BucketShopApp.services', [])
            .factory('bucketShopService', function($http) {

                var api = {};

                api.getDrivers = function() {
                    return $http({
                        method: 'JSONP',
                        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
                    });
                };

                return api;
            });