JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<input placeholder="Search..." type="search" data-bind="value: searchQuery">
  
<div class="view-tracks">
	<ul data-bind="foreach: computedTracks">
		<li data-bind="click: $root.goToTrack">
			<span data-bind="text: track"></span>
		</li>
	</ul>
</div>

JavaScript

var tracks = {
	init: function () {
		
		function TracksViewModel() {
			var self = this;
			
			self.tracks = ko.observableArray([]);
			
			self.chosenTrackId = ko.observable();
			self.chosenTrackData = ko.observable(null);
			
			self.goToTrack = function (track) {
				self.chosenTrackData(track);
			};

			self.searchQuery = ko.observable('');
			
			self.computedTracks = ko.computed(function() {
       	return ko.utils.arrayFilter(self.tracks(), function(item) {
           console.log(item.track);
         	return item.track.toLowerCase().indexOf(self.searchQuery().toLowerCase()) >= 0;
				});
			});

		};

		var vm = new TracksViewModel();

		$.getJSON('http://api.soundcloud.com/users/guy-j/tracks.json?client_id=c4bc3b1a93902abecbaca3fa4582d970', {limit: 200}, function(data) {
			vm.tracks($.map(data, function (track) {
				return {
					artwork: track.artwork_url,
					duration: track.duration,
					permalink: track.permalink_url,
					listens: track.playback_count,
					stream: track.stream_url + '?client_id=c4bc3b1a93902abecbaca3fa4582d970',
					track: track.title.replace(/Guy J -/g, '').replace(/Guy j -/g, '').replace(/GuyJ -/g, '').replace(/Guy J mix/g, 'Guy J Remix').replace(/Guy J Mix/g, 'Guy J Remix')
				};
			}));
		});

		ko.applyBindings(vm);
	}
}

tracks.init();