Find specific line in CSV based on 2 values with Javascript

Question

I am trying to search, find and fetch some data from a CSV file using HTML/PHP/Javascript. I want to make a form with 2 dropdowns, one for the FROM Zone name and one for the TO Zone name, and use the Zone codes (102, 104, 105 etc) as values for the dropdown items.

After the user have selected the FROM and TO i want to display the single digit to the far right (col 5).

Example: User choose "Zone1" to "Zone4", then the number "4" should be returned.

FromZoneCode;FromZoneName;ToZoneCode;ToZoneName;Distance;;;;
101;zone1;101;zone1;1;;;;
101;zone1;104;zone4;4;;;;
101;zone1;105;zone5;5;;;;
104;zone4;101;zone1;4;;;;
104;zone4;105;zone5;2;;;;
104;zone4;104;zone4;1;;;;

I have tried to search for a solution for this but i cant seem to find the right info.

Answer 1

Worked out after a long time:

Don't know how you got the CSV data. In the following example, I got it by an ajax request.

1. No jQuery needed.
2. Created the dropdowns dynamically.
3. Set the variable delimeter to ; (or) , as required, because most CSV files contains CSV delimeter.
4. Give the names of the columns for which dropdowns to be created in the variables dropdownname1 and dropdownname2.
5. Give the name of the column to be displayed as result on chaning dropdowns in the variable resultname.
6. Create a <span> element with id="result" in the HTML to display the result.
7. Variable keys contains column names.

8. Variable values contains array of arrays as values.

   var data = [];
   $.ajax({
       url:"/Users/Default/Downloads/test.csv",
       type:"GET",
       datatype:"csv",
       success:function(response){
           data = response.split(/\r\n/);
           start();
       }
   });
   
   //Logic starts here
   //Initializations
   var keys = [], values = [], delimiter = ";";
   var dropdownname1 = "FromZoneName", dropdownname2 = "ToZoneName", resultname = "Distance";
   var resultelem = document.getElementById("result");
   
   //Functionalities
   function createDropdown(field)
   {
       function createOption(option, isselected)
       {
           var optionelem = document.createElement("option");
           optionelem.value=option;
           optionelem.text=option;
           optionelem.selected = isselected;
           return optionelem;
       }
       var selectelem = document.createElement("select");
       selectelem.setAttribute("id",field);
       var insertedoptions = [];
       for(var i=0;i<values.length;i++)
       {
           var option = values[i][keys.indexOf(field)];
           if(insertedoptions.indexOf(option) == -1)
           {
               insertedoptions.push(option);
               selectelem.appendChild(createOption(option));
           }
       }
       selectelem.appendChild(createOption("",true));
       return selectelem;
   }
   
   function start()
   {
       keys = data.splice(0,1)[0].split(delimiter);
       values = [];
       for(var i=0,n=data.length;i<n;i++)
       {
           values.push(data[i].split(delimiter));
       }
       var bodyelem = document.getElementsByTagName("body")[0];
       bodyelem.appendChild(createDropdown(dropdownname1));
       bodyelem.appendChild(createDropdown(dropdownname2));
       document.getElementById(dropdownname1).addEventListener("change",displayData);
       document.getElementById(dropdownname2).addEventListener("change",displayData);
   }
   
   function displayData()
   {
       var selectelem1 = document.getElementById(dropdownname1), selectelem2 = document.getElementById(dropdownname2);
       var selectedvalue1 = selectelem1.value, selectedvalue2 = selectelem2.value;
       for(var i=0,n=values.length;i<n;i++)
       {
           if(values[i][keys.indexOf(dropdownname1)] == selectedvalue1 && values[i][keys.indexOf(dropdownname2)] == selectedvalue2)
           {
               resultelem.innerHTML=values[i][keys.indexOf(resultname)];
               break;
           }
           else
           {
               resultelem.innerHTML="";
           }
       }
   }