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

Question

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?

For what it's worth, jQuery is just a library written in JavaScript. Your answer will still be in JavaScript even if you use jQuery. — Mike Cluck
– Mike Cluck, Commented Aug 6, 2015 at 17:53
Thanks @Mike C, I know that. Still any solution is welcome :). — Sayon Ghosh
– Sayon Ghosh, Commented Aug 6, 2015 at 17:56

Jan Schär · Accepted Answer · 2015-08-06 21:40:59Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related