Question

I want to dynamically create a <select></select> (or maybe a textbox with autocomplete) input file depending on an Excel file with a format like this:

Airport Code    Airport Name    Language Code
 AAC             Al Arish                                            en
 AAE             Annaba Les Saline                                   en
 AAH             Aachen Merzbruck                                    en
 AAL             Aalborg                                             en
 AAN             Al Ain                                              en
 AAQ             Anapa                                               en
 AAR             Aarhus Tirstrup                                     en
 AAU             Asau                                                en

(with many more)

I would need to open the .xls file and read every row so that I can get the two first colums to act as the anchor and value.

This is the most related content I’ve found and the links are broken How to read and write into file using JavaScript

Is there a solution for this that will work for IE7

Answer 1

If your file is on the http server you can read it using AJAX.

Let’s first define some constants:

var CSV_URL = "http://server.domain/path/file.csv";
var CSV_COLUMN = ';'
var CSV_ROW = '\n'

CSV_URL is the URL of your CSV file.

CSV_COLUMN is delimiter character which devides columns.

CSV_ROW is delimiter character which devides rows.

---

Now we need to do AJAX query to get the CSV data content.
I’m using jQuery to do AJAX requests.

$.get (CSV_URL, null, function (data) {
    var result = parse_csv (data);
    var e = create_select (result);
    document.body.appendChild (e);
});

Ok, now we need to parse the data…

function parse_csv (data) {
    var result = new Array();
    var rows = data.split (CSV_ROW);

    for (var i in rows) {
        if (i == 0) continue; // skip the first row

        var columns = rows[i].split (CSV_COLUMN);
        result.push ({ "value": columns[1], "text": columns[0] });
    }

    return result;
}

… and create the select:

function create_select (data) {
    var e = document.createElement ('select');

    for (var i in data) {
        var option = document.createElement ('option');

        option.value = data[i].value;
        option.innerHTML = data[i].text;

        e.appendChild (option);
    }

    return e;
}

Everything besides AJAX request is pure JavaScript. If you don’t want jQuery for some reason, you can write your AJAX request in pure JS as well.