閱讀，搜索和排序所有CSV值沒有受騙者

Question

我有以下CSV：

Title, Rating, Year, Genre 
All Quiet on the Western Front,8.1,1930,"Drama , War" 
Gone with the Wind,8.2,1939,"Drama , Romance , War" 
The Wizard of Oz,8.2,1939,"Adventure , Family , Fantasy , Musical" 
Fantasia,7.9,1940,"Animation , Family , Fantasy , Music" 
Pinocchio,7.6,1940,"Animation , Adventure , Drama , Family , Fantasy , Music" 
The Great Dictator,8.5,1940,"Comedy , Drama , War" 
Citizen Kane,8.5,1941,"Drama , Mystery" 
Dumbo,7.3,1941,"Animation , Family , Musical" 
Bambi,7.4,1942,"Animation , Drama , Family" 
Casablanca,8.7,1942,"Drama , Romance , War" 
It's a Wonderful Life,8.7,1946,"Drama , Family , Fantasy" 
Notorious,8.2,1946,"Drama , Film-Noir , Romance , Thriller" 
All About Eve,8.4,1950,Drama 
Cinderella,7.3,1950,"Animation , Family , Fantasy , Musical , Romance" 
Alice in Wonderland,7.4,1951,"Animation , Adventure , Family , Fantasy , Musical" 
Strangers on a Train,8.2,1951,"Crime , Film-Noir , Thriller" 
Dial M for Murder,8.2,1954,"Crime , Thriller" 
Knock on Wood,7,1954,Comedy 
Seven Samurai,8.8,1954,"Action , Drama" 
Lady and the Tramp,7.4,1955,"Animation , Adventure , Comedy , Family , Romance" 
Rebel Without a Cause,7.8,1955,"Drama , Romance" 
The Trouble with Harry,7.2,1955,"Comedy , Mystery" 
Forbidden Planet,7.7,1956,"Action , Adventure , Sci-Fi" 
The Ten Commandments,7.9,1956,"Adventure , Drama , History" 
12 Angry Men,8.9,1957,Drama 

我試圖做到的是這個（我的頭不能正常工作現在）：

閱讀CSV並創建一個僅顯示所有獨特類型的陣列（例如：戲劇，戰爭，幻想..而不重複陣列中的流派）

搜索CSV以查找具有特定流派的行。例如，如果我搜索Drama，則只會顯示第4列中具有Drama值的行。 （不顯示流派列）

按標題，評分或年份（不顯示流派列）對CSV進行排序。

我讀了CSV以下列方式：

$.ajax({ 
     type: "GET", 
     url: "movies.csv", 
     dataType: "text", 
     success: function(data) { 
      var results = $.parse(data); 
     } 
    }); 

如果我做了alert(JSON.stringify(results, null, 4))它將打印正確的信息。 JSON對象如下所示：

{ 
    "results": { 
    "fields": [ 
     "Title", 
     " Rating", 
     " Year", 
     " Genre" 
    ], 
    "rows": [ 
     { 
     "Title": "All Quiet on the Western Front", 
     " Rating": 8.1, 
     " Year": 1930, 
     " Genre": "Drama , War" 
     }, 
     { 
     "Title": "Gone with the Wind", 
     " Rating": 8.2, 
     " Year": 1939, 
     " Genre": "Drama , Romance , War" 
     }, 
     { 
     "Title": "The Wizard of Oz", 
     " Rating": 8.2, 
     " Year": 1939, 
     " Genre": "Adventure , Family , Fantasy , Musical" 
     }, 
     { 
     "Title": "Fantasia", 
     " Rating": 7.9, 
     " Year": 1940, 
     " Genre": "Animation , Family , Fantasy , Music" 

所以我知道該部分正在工作。我試圖創建一個數組，然後用流派值填充一個SELECT標籤。然後，如果用戶選擇其中一個，它將再次搜索該文件，但只顯示具有該流派指定的行。用戶將能夠通過3個第一列對列表進行排序。我現在的問題是，自從我的頭部（和視力）現在工作狀況不佳以來。

Answer 1

流派選擇

http://jsfiddle.net/coma/4N676/25/

var movies = new Movies(JSON.parse(gists.files.Movies.content)); 
var html = '<option>Filter by genre</option>'; 

movies.getGenres().forEach(function(genre) { 

    html += '<option value="' + genre + '">' + genre + '</option>'; 
}); 

$('#genre') 
    .html(html) 
    .change(function() { 

     var list = movies 
      .reset() 
      .filterByGenre(this.value) 
      .sortByTitleAsc() 
      .getList(); 

     alert(JSON.stringify(list)); 
    }); 

http://jsfiddle.net/coma/4N676/

基地

var Movies = function(movies) 
{ 
    var genres = []; 
    var ratingMin = Infinity; 
    var ratingMax = -1; 
    var yearMin = Infinity; 
    var yearMax = -1; 

    movies.forEach(function(movie, movieIndex) { 

     movie.Genre = movie.Genre.split(', '); 
     movie.Rating = parseFloat(movie.Rating); 
     movie.Year = parseInt(movie.Year, 10); 

     ratingMin = Math.min(movie.Rating, ratingMin); 
     ratingMax = Math.max(movie.Rating, ratingMax); 

     yearMin = Math.min(movie.Year, yearMin); 
     yearMax = Math.max(movie.Year, yearMax); 

     movie.Genre.forEach(function(genre, genreIndex) { 

      genre = $.trim(genre).toLowerCase(); 
      movie.Genre[genreIndex] = genre; 

      if (genres.indexOf(genre) < 0) { 

       genres.push(genre); 
      } 

      genres.sort(); 
     }); 
    }); 

    this.original = movies; 
    this.list  = movies.slice(); 
    this.ratingMin = ratingMin; 
    this.ratingMax = ratingMax; 
    this.yearMin = yearMin; 
    this.yearMax = yearMax; 
    this.genres = genres; 
}; 

Movies.prototype.reset = function() 
{ 
    this.list = this.original.slice(); 

    return this; 
}; 

個吸氣劑

Movies.prototype.getList = function() 
{ 
    return this.list.slice(); 
}; 

Movies.prototype.getRatingRange = function() 
{ 
    return [this.ratingMin, this.ratingMax]; 
}; 

Movies.prototype.getRatingMax = function() 
{ 
    return this.ratingMax; 
}; 

Movies.prototype.getRatingMin = function() 
{ 
    return this.ratingMin; 
}; 

Movies.prototype.getYearRange = function() 
{ 
    return [this.yearMin, this.yearMax]; 
}; 

Movies.prototype.getYearMax = function() 
{ 
    return this.yearMax; 
}; 

Movies.prototype.getYearMin = function() 
{ 
    return this.yearMin; 
}; 

Movies.prototype.getGenres = function() 
{ 
    return this.genres.slice(); 
}; 

過濾器

Movies.prototype.filterByNumbers = function(property, number) 
{ 
    if ($.isNumeric(number)) { 

     this.list = this.list.filter(function(movie) { 

      return movie[property] === number; 
     }); 
    } 

    if ($.isArray(number)) { 

     this.list = this.list.filter(function(movie) { 

      return movie[property] >= number[0] 
       && movie[property] <= number[1]; 
     }); 
    } 

    return this; 
}; 

Movies.prototype.filterByGenre = function(genre) 
{ 
    this.list = this.list.filter(function(movie) { 

     return movie 
      .Genre 
      .indexOf(genre.toLowerCase()) >= 0; 
    }); 

    return this; 
}; 

Movies.prototype.filterByTitle = function(title) 
{ 
    this.list = this.list.filter(function(movie) { 

     return movie 
      .Title 
      .toLowerCase() 
      .indexOf(title.toLowerCase()) >= 0; 
    }); 

    return this; 
}; 

Movies.prototype.filterByYear = function(year) 
{ 
    this.filterByNumbers('Year', year); 

    return this; 
}; 

Movies.prototype.filterByRating = function(rating) 
{ 
    this.filterByNumbers('Rating', rating); 

    return this; 
}; 

分揀機

Movies.prototype.sortAsc = function(property) 
{ 
    this.list.sort(function(a, b) { 

     return a[property] > b[property]; 
    }); 

    return this; 
}; 

Movies.prototype.sortDesc = function(property) 
{ 
    this.list.sort(function(a, b) { 

     return a[property] < b[property]; 
    }); 

    return this; 
}; 

Movies.prototype.sortByTitleAsc = function() 
{ 
    this.sortAsc('Title'); 

    return this; 
}; 

Movies.prototype.sortByTitleDesc = function() 
{ 
    this.sortDesc('Title'); 

    return this; 
}; 

Movies.prototype.sortByYearAsc = function() 
{ 
    this.sortAsc('Year'); 

    return this; 
}; 

Movies.prototype.sortByYearDesc = function() 
{ 
    this.sortDesc('Year'); 

    return this; 
}; 

Movies.prototype.sortByRatingAsc = function() 
{ 
    this.sortAsc('Rating'); 

    return this; 
}; 

Movies.prototype.sortByRatingDesc = function() 
{ 
    this.sortDesc('Rating'); 

    return this; 
}; 

使用

$.getJSON('https://api.github.com/gists/9803182', function(gists) { 

    var movies = new Movies(JSON.parse(gists.files.Movies.content)); 

    movies 
     .filterByGenre('comedy') 
     .filterByYear([1954, 2000]) 
     .sortByTitleDesc(); 

    console.log('Filtered and sorted', movies.getList()); 
    console.log('Original', movies.reset().getList()); 
}); 

Answer 2

好吧，在這裏。

你可以解析你的JSON並逐個遍歷它。你需要有一個父對象，它可以保持最後的行與流派的值。

父對象會是這個樣子：

var myObject = { 
genre : {records: []} 
} 

這將包含流派記載映射。

在遍歷JSON對象時，如果您在'myObject'中已經找到類型，只需按下該記錄即可。如果沒有，創建'流派'，然後推它。

像下面這樣。

//Initialize my variables - Note, I'm using my own JSON 
var objectArray = JSON.parse('[{"title":"title1","name":"name1","genre":"genre1"},{"title":"title2","name":"name2","genre":"genre2"},{"title":"title3","name":"name3","genre":"genre1"}]'), 
counter=0,myObject={}; 

for (count=0; counter<objectArray.length; counter++) { 
    var individualRecord=objectArray[counter]; 
    if(myObject[individualRecord.genre] === undefined) { 
     console.log('creating object'); 
     myObject[individualRecord.genre]={records : []}; 
    } 
    console.log('adding individual record'); 
    myObject[individualRecord.genre].records.push(individualRecord); 
} 

的console.log（myObject的）會給你：

genre1 - Array with 2 elements 
genre2 - Array with 1 element 

帖子這個，如果你想要檢索特定類型的元素，你可能只是這樣做：

myObject["genre1"] - to handle dynamic genres 

OR 

myObject.genre1 - to explicitly fetch the value of the variable 

一旦以這種格式存儲了數據，就不需要再次讀取文件。您可以根據myObject["<filter 1>"]等進行過濾。

希望能幫到您！