CODEWITHSUNDEEP
javascriptjqueryhtmlcsv
Sayon Ghosh
Sayon Ghosh

Reputation: 117

using jquery/javascript for lookup on a csv file containing headers

My lookup file Kind of looks like this.

APP_FAMILY,APPLICATION
app_fam1,app_name1
app_fam1,app_name2
app_fam2,app_name3
app_fam2,app_name4

I have two select fields, like this:

this is where I want to show "distinct" APP_FAMILY column values

Select Application Family: <select id="app_family"></select>

this is where I want to show the APPLICATION column values corresponding to the APP_FAMILY selected

Select Application: <select id="app"></select>

Now I want both of these select tags to be populated by jquery or javacript from the lookup file. This is the constraint. Can anybody suggest how to proceed?

Upvotes: 1

Views: 1597

Answers (1)

Jan Sch&#228;r
Jan Sch&#228;r

Reputation: 828

I'll use jQuery for my answer here. First, you need to load the CSV file. Then you parse it, at the same time building the family select. Finally you need to listen for changes and update the app select.

$.ajax('/path/to/lookup.csv').done(function(data) {
  data = data.split('\n'); //replace with \r\n if you use Windows line endings
  data.shift(); //remove header

  var families = {},
      $family = $('#app_family'),
      $app= $('#app');
  for (var i = 0; i < data.length; i++) {
    if (!data[i]) {
      continue; //skip empty lines
    }
    var fields = data[i].split(',');
    if (!families.hasOwnProperty(fields[0])) {
      families[fields[0]] = [];
      $family.append('<option value="' + fields[0] + '">' + fields[0] + '</option>');
    }
    families[fields[0]].push(fields[1]);
  }

  //next, fill in app select whenever the selected family changes
  function updateApp() {
    var family = families[$family.val()];
    var html = '';
    for (var i = 0; i < family.length; i++) {
      html += '<option value="' + family[i] + '">' + family[i] + '</option>';
    }
    $app.html(html)
  }
  updateApp();
  $family.change(updateApp);
})

Here is a jsfiddle.

Upvotes: 3

Related Questions