JSFiddle - React, Tailwind, and code Playground

by Ehren Dames

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="albums">
    <input type="text" class="albums--start-date" />
    <input type="text" class="albums--end-date" />
    <input type="button" value="Filter" class="albums--submit-button" />
    <div ng-repeat="item in vm.albums.Results">
      <div>{{ item.title }}</div>
      <div>{{ item.artist }}</div>
      <div>{{ item.releasedate }}</div>
    </div>
  </div>
</div>

JavaScript

var app = angular.module('app', ['app.albums']);

angular
  .module('app.albums', [])
  .controller('albums', albums);

function albums($scope, $http) {
  var vm = this;

  vm.albums = {
    Results: [],
    TotalCount: 0
  };

  vm.albums = getAlbumsBetweenReleaseDates();

  function getAlbumsBetweenReleaseDates(startdate, enddate) {

    var daterange = {
      'StartDate': startdate || '',
      'EndDate': enddate || ''
    };

    var dto = JSON.stringify(daterange);

    var requestUrl = "/echo/json/";

    return $http({
      method: 'post',
      url: requestUrl,
      data: dto,
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(getResults);
  }

  function getResults(response) {
    return [];
  }
}