Last FM Lookup

by SpAm

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<textarea data-bind="textInput:indexes" style="height:200px;"></textarea>

<ul data-bind="foreach:matched">
  <li> 
    <span data-bind="text:number"></span> - 
    <span data-bind="text:name"></span> 
  </li>
</ul>

CSS

li {
  list-style-type:none;
}

JavaScript

function MyModel(){
	var self = this;
  
	self.artists = ko.observableArray([]),
  self.indexes = ko.observable(""),
  self.matched = ko.computed(function(){
  	var artists = self.artists();
    var indexText = self.indexes();
    if( indexText=="" ) {
    	return [];
    }
    var indexes = indexText.split("\n");
    console.log(artists);
    
    indexes = indexes.map(function(i){
    	return {
      		number:i,
      		name:artists[parseInt(i)-1].name
      }
    });
    console.log(indexes);
    
    return indexes;
  });
} 
  
  $.ajax({
    url:"https://ws.audioscrobbler.com/2.0?method=library.getartists&api_key=85028cafed35a2090b0de1392e610118&user=thesam101&format=json&limit=300",
    success:function(d){
    	var modeller = new MyModel();
    	modeller.artists(d.artists.artist);
      ko.applyBindings(modeller);
    }
  });