CODEWITHSUNDEEP
jqueryajax
screampuff
screampuff

Reputation: 217

Use ajax to filter column 1 of CSV and display column 2 data

I'd like to have a simple HTML dropdown select list, that when an option is selected, it acts as a filter for the first column of a CSV, then the filtered data from the second column is displayed.

Here is a codepen I'm working on: http://codepen.io/oreoloveboss/pen/ZePpPd?editors=1010
I am able to load the CSV and display it with the following code:

jQuery(function($){
    $.ajax({
    url: "https://cors-anywhere.herokuapp.com/https://drive.google.com/uc?export=download&id=0B9qMSGDUnssqd1hFTVUxak0wRHc",
    type: 'GET',
    dataType: 'text',
    success: function (data) {
       $.each(data.split(/[\n\r]+/), function(index, line) {
        $('<li>').text(line).appendTo('#client-data');
       });
    },
     async: true
    });

});

But I am little lost on how to both filter it, and use variables from the html select list as the filters. In that codepen the CSV is 2 columns, one is letters A,A,A,A,A,B,B,B,B and the second is numbers 1,2,3,4,5,100,101,102,103,104,105.

Upvotes: 0

Views: 969

Answers (1)

Neil
Neil

Reputation: 14313

Almost there! You just didn't have a way of specifying the column:

$('<li>').text(line.split(/\t/)[1]).appendTo('#client-data'); //grab the second element


jQuery(function($){
    $.ajax({
    url: "https://cors-anywhere.herokuapp.com/https://drive.google.com/uc?export=download&id=0B9qMSGDUnssqd1hFTVUxak0wRHc",
    type: 'GET',
    dataType: 'text',
    success: function (data) {
       $.each(data.split(/[\n\r]+/), function(index, line) {
        temp = line.split(/\t/);
        if (temp[0] == "A")
         $('<li>').text(temp[1]).appendTo('#client-data');
       });
    },
     async: true
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="client-data">

</ul>

Upvotes: 1

Related Questions