CODEWITHSUNDEEP
javascripthtmlcsv
Vladyslav
Vladyslav

Reputation: 63

How can i put data from parsed csv to select boxes?

I used JS to parse the csv file.

Example of csv :

Year,Model,Mileage,Color,Vin,Image
2012,BUICK LACROSSE FWD V6 FFV 4D SEDAN LEATHER,113046,BROWN,1G4GC5E34CF177752,https:imagelink

And the code of parser

$(document).ready(function(){
     $('#load_data').click(function(){
      $.ajax({
       url:"Cars.csv",
       dataType:"text",
       success:function(data)
       {
        var cars_data = data.split(/\r?\n|\r/);
        var table_data = '<table class="table table-bordered table-striped">';
        for(var count = 0; count<cars_data.length; count++)
        {
         var cell_data = cars_data[count].split(",");
         table_data += '<tr>';
         for(var cell_count=0; cell_count<cell_data.length; cell_count++)
         {
          if(count === 0)
          {
           table_data += '<th>'+cell_data[cell_count]+'</th>';
          }
          else
          {
           table_data += '<td>'+cell_data[cell_count]+'</td>';
          }
         }
         table_data += '</tr>';
        }
        table_data += '</table>';
        $('#cars_table').html(table_data);
       }
      });
     });

    });

Example of select boxes

<select>
                  <option value="0">Model</option>
                  <option value="1">HERE COMES THE MODEL FROM PARSED CSV</option>
                </select>

So how can i put data from this parsed csv to select boxes on the html ?

Upvotes: 0

Views: 41

Answers (1)

miile7
miile7

Reputation: 2393

Since your question wasn't clear to me, I added two solutions. The first solution one takes the Model column and offers a selectbox for this column. You can change the column to use as a select box if you change the select_column_index (to use the Year for example, set select_column_index = 0).

I created the addTable(data) function. This is equal to your success:function(){...}, but for testing I cannot use ajax. Your code is then 

$(document).ready(function(){
    $('#load_data').click(function(){
        $.ajax({
            url:"Cars.csv",
            dataType:"text",
            success:addTable,
        });
    );
});

The code takes the column with the select_column_index and uses the first cell (in the first row in the select_column_index-th column) as the label. The following cells (in each row in the select_column_index-th column) are the options for the select.

Note that one should not use the label as the first option from the select box as you did in your example. This makes it possible for users to select the mode Model which makes no sense. This is more complicated for users and leads to mistakes. Also you have to check the result on the server side which is more unnecessary code.

You can check the output in the following snippet. The second solution is added below.

// for demo only
let csv = 
  "Year,Model,Mileage,Color,Vin,Image\n" + 
  "2012,BUICK LACROSSE FWD V6 FFV 4D SEDAN LEATHER,113046,BROWN,1G4GC5E34CF177752,\n" + 
  "2013,Lincoln MKZ 3.7L AWD,113046,Lincoln,,\n";

// for demo only
$(document).ready(function(){
  addTable(csv);
});

function addTable(data){
  var cars_data = data.split(/\r?\n|\r/);
  var table_data = '<table class="table table-bordered table-striped">';
  
  // use model for the select
  var select_column_index = 1;
  var label_data = "<label for='csv-select'>";
  var select_data = "<select id='csv-select'>";
  
  for(var count = 0; count<cars_data.length; count++){
    var cell_data = cars_data[count].split(",");
    table_data += '<tr>';
    for(var cell_count=0; cell_count<cell_data.length; cell_count++){
      if(count === 0){
         table_data += '<th>'+cell_data[cell_count]+'</th>';
      }
      else{
         table_data += '<td>'+cell_data[cell_count]+'</td>';
      }
      
      if(cell_count == select_column_index){
        if(count == 0){
          label_data += cell_data[cell_count];
        }
        else{
          select_data += 
            "<option value='" + cell_data[cell_count] + "'>" + 
              cell_data[cell_count] + 
            "</option>";
        }
      }
    }
    table_data += '</tr>';
  }
  table_data += '</table>';
  label_data += "</label>";
  select_data += "</select>";
  
  $('#cars_table').html(table_data);
  $('#select-wrapper').html(label_data + " " + select_data);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cars_table"></div>
<div id="select-wrapper"></div>

The second solution takes all the columns and adds a select box for each column. Note that I did not add the table, you can just use your code.

This is basically the same code but I am saving the options to another variable. After all options of all columns are present, they are pasted (replace the %options%) in the select boxes.

// for demo only
let csv = 
  "Year,Model,Mileage,Color,Vin,Image\n" + 
  "2012,BUICK LACROSSE FWD V6 FFV 4D SEDAN LEATHER,113046,BROWN,1G4GC5E34CF177752,\n" + 
  "2013,Lincoln MKZ 3.7L AWD,113046,Lincoln,,\n";

// for demo only
$(document).ready(function(){
  addSelects(csv);
});

function addSelects(data){
  var cars_data = data.split(/\r?\n|\r/);
  var select_options = [];
  var select_html = "";
  
  for(var count = 0; count < cars_data.length; count++){
    var cell_data = cars_data[count].split(",");
    for(var cell_count = 0; cell_count < cell_data.length; cell_count++){
      if(count == 0){
        select_html += 
          "<div class='select-line'>" + 
            "<label for='select-" + cell_count + "'>" + 
              cell_data[cell_count] + 
            "</label>" + 
            "<select id='select-" + cell_count + "' name='" + cell_data[cell_count] + "'>" + 
              "%options%" + 
            "</select>" + 
          "</div>";
      }
      else{
        if(select_options.length < cell_count){
          select_options.push("");
        }
        select_options[cell_count] += 
          "<option value='" + cell_data[cell_count] + "'>" + 
            cell_data[cell_count] + 
          "</option>";
      }
    }
  }
  
  for(var i = 0; i < select_options.length; i++){
    select_html = select_html.replace("%options%", select_options[i]);
  }
  
  $('#selects').html(select_html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selects"></div>

Upvotes: 1

Related Questions