Update html from csv - dynamic-html

Question

I have a quite long html menu list (circa 30 menu positions) where I am trying to dynamically populate with labels according to a .csv file. I’d like to change the each menu label i.e. “the Slots”. Each time the page is loaded, I’ll need to look up position1, and return the right label and Title tag in the page I'm pointing to. There are many fixed positions, but when the .csv file is updated, the menu label needs to change accordingly. To add fuel to my fire, I need to hide a menu if the position in the first column of the .csv cannot be found. This absolute amateur would appreciate any insight you might have.
CSV file saved into directory
position1,Slot1
position2,Slot2
position3,Slot3
position4,Slot4
HTML
<a href='link'>
<span class='hidden-minibar'>Slot 1 </span>
</a>
</li>
<a href='gohere'>
<span class='hidden-minibar'>Slot 2 </span>
</a>
</li>
<a href='link'>
<span class='hidden-minibar'>Slot 3 </span>
</a>
</li>
<a href='link'>
<span class='hidden-minibar'>Slot 4 </span>
</a>
</li>

Answer 1

if (window.FileReader) {
var reader = new FileReader();
reader.onload = function(filedata) {
var list = filedata.target.result;
csvParser(list);
};
reader.readAsText(this.selectedfile.target.files.item(0));
}
var csvParser = function(list) {
var quoteRegexp = new RegExp("^\"(.*)\"$");
var data = [];
var lines = list.split(new RegExp("\r?[\r\n]"));
for (var iCtr = 0; iCtr < lines.length; iCtr += 1) {
var fields = lines[iCtr].split(",");
for (var jCtr = 0; jCtr < fields.length; jCtr += 1) {
fields[jCtr] = fields[jCtr].replace(quoteRegexp, "$1");
}
data.push(fields);
}
return data;
}
use FileReader object and read csv file on client site
use csvParser function to parse row csv data
create dynamic html and appropriate logic on csvParser function result data.
Basic csv read Example
http://jsfiddle.net/techrevolt/W8fME/