How to Search Data in XML based on multiple search criteria defined by HTML Multi selection Dropdown using JQuery

Question

I have an application under development with the following scenario

There are 4 multi-select dropdowns:

1. DropDown1: Market Offering, which has <option> 's as SS, IE and HIX
2. DropDown2: Technology, which has values based on the optgroup ie Application is the optgroup label and then its corresponding values eg Java, Java EE. There are 4 such optgroups
3. DropDown3: Business Process - Specific to the business scenario but again list of select options
4. DropDown4: Project Scope : This too has multiple options which the user can select.

The user can select multiple values from the dropdowns above, none of them are mandatory and then click on Search Button

These values are used to search inside an xml file(DataSets.xml, given below) and the response should be Array of <State> elements within a given <DataSet> , If there are multiple <DataSet> elements that match the query, the resultant array should contain all of the <State> element values:

<DataSets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file://DataSets.xsd">
     <DataSet>
           <MarketOffering>IE</MarketOffering>
           <Technology>
                 <Application>J2EE</Application>
                 <Database>Oracle</Database>
                 <Middleware>MuleESB</Middleware>
                 <Reporting>Crystal Reports</Reporting>
                 <Correspondence>HPEx</Correspondence>
                 <RulesEngine>Corticon</RulesEngine>
           </Technology>
           <BizProcess>Registration</BizProcess>
           <ProjectScope>SNAP</ProjectScope>
           <State>MT</State>
           <State>RI</State>
     </DataSet>
      <DataSet>
           <MarketOffering>SS</MarketOffering>
           <Technology>
                 <Application>.NET</Application>
                 <Database>Oracle</Database>
                 <Middleware>MuleESB</Middleware>
                 <Reporting>CrystalReports</Reporting>
                 <Correspondence>HPEx</Correspondence>
                 <RulesEngine>Corticon</RulesEngine>
           </Technology>
           <BizProcess>Registration</BizProcess>
           <ProjectScope>SNAP</ProjectScope>
           <State>SD</State>
           <State>AZ</State>
     </DataSet>
</DataSets>

The condition of filtering is:

1. Options selected within the dropdown has a "OR" condition ie if either of the values given in the dropdown eg MarketOffering ie SS, IE or HIX is found in the XML, its a match.

2. Criteria across dropdown becomes AND condition ie MarketOffering as 'IE' AND Technology as 'J2EE' and ProjectScope as 'SNAP'

Following is the JQuery which I have written(Pretty naive I know, this is what happens when a Java Developer writes jQuery... :-)) uptil now but this isnt achieving all that I require. Can someone please help me in solving this riddle:

<script>
    $(document).ready(function () {

        $(".searchLink").click(function () {

            var solutionTypeArray = [];
            $('#solutionType option:selected').each(function (i, selected) {
                solutionTypeArray[i] = $(selected).val();
            });

            var applicationTypeArray = [];
            var databaseTypeArray = [];
            var middlewareArray = [];
            var correspondenceArray = [];
            var reportingArray = [];
            var rulesArray = [];

            $('#technology option:selected').each(function (i, selected) {

                if ($(selected).parent().prop('label') == 'Application') {
                    applicationTypeArray[i] = $(selected).val();
                } else if ($(selected).parent().prop('label') == 'Database') {
                    databaseTypeArray[i] = $(selected).val();
                } else if ($(selected).parent().prop('label') == 'Middleware') {
                    middlewareArray[i] = $(selected).val();
                } else if ($(selected).parent().prop('label') == 'Reporting') {
                    reportingArray[i] = $(selected).val();
                } else if ($(selected).parent().prop('label') == 'Correspondence') {
                    correspondenceArray[i] = $(selected).val();
                } else if ($(selected).parent().prop('label') == 'Rules Engine') {
                    rulesArray[i] = $(selected).val();
                }
            });

            var bizProcessArray = [];
            $('#bizProcesses option:selected').each(function (i, selected) {
                bizProcessArray[i] = $(selected).val();
            });

            var projectScopeArray = [];
            $('#projectScope option:selected').each(function (i, selected) {
                projectScopeArray[i] = $(selected).val();
            });

            $.ajax({
                type: "GET",
                url: "DataSets.xml",
                dataType: "xml",
                success: function (xml) {
                    //Read the DataSet element and find the children's value to compare with HTML values
                    var $dataset = $(xml).find("DataSet");

                    $dataset.each(function () {

                        var marketOfferingFlag = false;
                        $dataset.find("MarketOffering").each(function () {
                            if ($.inArray($(this).text(), solutionTypeArray) != -1) {
                                marketOfferingFlag = true;
                            }
                        });

                        var bizProcessFlag = false;
                        $dataset.find("BizProcess").each(function () {
                            if ($.inArray($(this).text(), bizProcessArray) != -1) {
                                bizProcessFlag = true;
                            }
                        });

                        var projectScopeFlag = false;
                        $dataset.find("ProjectScope").each(function () {
                            if ($.inArray($(this).text(), projectScopeArray) != -1) {
                                projectScopeFlag = true;
                            }
                        });

                        var applicationTypeFlag = false;
                        $dataset.find("Application").each(function () {
                            if ($.inArray($(this).text(), applicationTypeArray) != -1) {
                                applicationTypeFlag = true;
                            }
                        });

                        var databaseTypeFlag = false;
                        $dataset.find("Database").each(function () {
                            if ($.inArray($(this).text(), databaseTypeArray) != -1) {
                                databaseTypeFlag = true;
                            }
                        });

                        var middelWareFlag = false;
                        $dataset.find("Middleware").each(function () {
                            if ($.inArray($(this).text(), middlewareArray) != -1) {
                                middelWareFlag = true;
                            }
                        });

                        var correspondenceFlag = false;
                        $dataset.find("Correspondence").each(function () {
                            if ($.inArray($(this).text(), correspondenceArray) != -1) {
                                correspondenceFlag = true;
                            }
                        });

                        var reportingFlag = false;
                        $dataset.find("Reporting").each(function () {
                            if ($.inArray($(this).text(), reportingArray) != -1) {
                                reportingFlag = true;
                            }
                        });

                        var rulesFlag = false;
                        $dataset.find("RulesEngine").each(function () {
                            if ($.inArray($(this).text(), rulesArray) != -1) {
                                rulesFlag = true;
                            }
                        });

                        if (marketOfferingFlag || bizProcessFlag || projectScopeFlag || applicationTypeFlag
                               || databaseTypeFlag || rulesFlag || correspondenceFlag || reportingFlag || middelWareFlag) {

                            var array = $dataset.find("State").map(function () {
                                return $(this).text();
                            }).get();

                            alert(array)
                        }

                    });
                },
                error: function () {
                    alert("XML File : DataSets.xml cannot be loaded successfuly. Please check the path and try again.");
                }
            });

        });

    });

</script>

Hope someone would be able to help me out.

Thanks

Edit: Providing the snapshot of the exact requirement:

Answer 1

ok try this:

HTML:

 <body>
    <select id="solutionType" multiple>
        <option>0</option>
        <option>SS</option>
        <option>IE</option>
        <option>HIX</option>
    </select>

    <select id="technology" multiple>
        <option>0</option>
        <optgroup label="Application">
            <option>JAVA</option>
            <option>JEE</option>
            <option>J2EE</option>
        </optgroup>
        <optgroup label="Database">
            <option>Oracle</option>
        </optgroup>
    </select>

    <select id="bizProcesses" multiple>
        <option>0</option>
        <option>Registration</option>
    </select>

    <select id="projectScope" multiple>
        <option>0</option>
        <option>SNAP</option>
    </select>
    <button class="searchLink">Search</button>
</body>

JS:

 <script>
 $(document).ready(function() {
    $(".searchLink").click(function() {
        var solutionType = $("#solutionType").val();


        var techOpts = new Array();
        $('#technology :selected').each(function() {
            var obj = {
                label: $(this).parent().attr("label"),
                value: $(this).val()
            };
            techOpts.push(obj);
        });


        var bizProcesses = $("#bizProcesses").val();
        var projectScope = $("#projectScope").val();
        $.ajax({
            type: "GET",
            url: "DataSets.xml",
            dataType: "xml",
            success: function(xml) {
                var $dataset = $(xml).find("DataSet");
                $dataset.each(function(k) {
                    var $dataset_element = $(this);
                    var arr = new Array();

                    if (solutionType != 0) {
                        var solArr = new Array();
                        $.each(solutionType, function(k) {
                            if ($dataset_element.find("MarketOffering").text() === solutionType[k]) {
                                //solArr.push(solutionType[k]);
                                solArr.push(true);
                            } else {
                                solArr.push(false);
                            }
                        });
                        arr.push(solArr);
                    } else {
                        arr.push(false);
                    }

                    if (techOpts[0].value != 0) {
                        var techArr = new Array();
                        $.each(techOpts, function(k, v) {
                            if ($dataset_element.find(v.label).text() === v.value) {
                                techArr.push(true);
                            } else {
                                techArr.push(false);
                            }
                        });
                        arr.push(techArr);
                    } else {
                        arr.push(false);
                    }

                    if (bizProcesses != 0) {
                        var bizArr = new Array();
                        $.each(bizProcesses, function(k) {
                            if ($dataset_element.find("BizProcess").text() === bizProcesses[k]) {
                                //bizArr.push(bizProcesses[k]);
                                bizArr.push(true);
                            } else {
                                bizArr.push(false);
                            }
                        });
                        arr.push(bizArr);
                    } else {
                        arr.push(false);
                    }

                    if (projectScope != 0) {
                        var projhArr = new Array();
                        $.each(projectScope, function(k) {
                            if ($dataset_element.find("ProjectScope").text() === projectScope[k]) {
                                //projhArr.push(projectScope[k]);
                                projhArr.push(true);
                            } else {
                                projhArr.push(false);
                            }
                        });
                        arr.push(projhArr);
                    } else {
                        arr.push(false);
                    }

                    var foundArr = new Array();
                    $.each(arr, function(k, v) {

                        if (v) {
                            if (v.length > 0 && $.inArray(true, v) > -1) {
                                foundArr.push(true);
                            } else {
                                foundArr.push(false);
                            }
                        }
                    });

                    if (foundArr.length > 0 && $.inArray(false, foundArr) == -1) {
                        var array = $dataset_element.find("State").map(function() {
                            return $(this).text();
                        }).get();
                        alert(array);
                    }
                });
            },
            error: function() {
                alert("XML File : DataSets.xml cannot be loaded successfuly. Please check the path and try again.");
            }
        });
    });

});
</script>

Answer 2

Ok this is what I would do. Try it and let me know:

HTML:

    <select id="solutionType">
        <option>0</option>
        <option>SS</option>
        <option>IE</option>
        <option>HIX</option>
    </select>

    <select id="technology">
        <option>0</option>
        <optgroup label="Application">
            <option>JAVA</option>
            <option>JEE</option>
        </optgroup>
        <optgroup label="Database">
            <option>Oracle</option>
        </optgroup>
    </select>

    <select id="bizProcesses">
        <option>0</option>
        <option>Registration</option>
    </select>

    <select id="projectScope">
        <option>0</option>
        <option>SNAP</option>
    </select>
    <button class="searchLink">Search</button>

JS:

    <script>
        $(document).ready(function() {
        $(".searchLink").click(function() {
            var solutionType = $("#solutionType").val();

            var technology = $("#technology").val();
            var technology_label = $('#technology :selected').parent().attr('label');

            var bizProcesses = $("#bizProcesses").val();
            var projectScope = $("#projectScope").val();
            $.ajax({
                type: "GET",
                url: "data.xml",
                dataType: "xml",
                success: function(xml) {
                    var $dataset = $(xml).find("DataSet");
                    $dataset.each(function(k) {

                        var arr = new Array();

                        if(solutionType != 0){
                            if ($(this).find("MarketOffering").text() === solutionType) {
                                arr.push(solutionType);
                            } else {
                                arr.push(false);
                            }
                        }

                        if(technology != 0){
                            if ($(this).find(technology_label).text() === technology) {
                                arr.push(technology);
                            } else {
                                arr.push(false);
                            }
                        }

                        if(bizProcesses != 0){
                            if ($(this).find("BizProcess").text() === bizProcesses) {
                                arr.push(bizProcesses);
                            } else {
                                arr.push(false);
                            }
                        }

                        if(projectScope != 0){
                            if ($(this).find("ProjectScope").text() === projectScope) {
                                arr.push(projectScope);
                            } else {
                                arr.push(false);
                            }
                        }
                        console.log(arr);


                        if($.inArray(false, arr) == -1){
                            var array = $(this).find("State").map(function() {
                                return $(this).text();
                            }).get();
                            alert(array);
                        }

                    });
                },
                error: function() {
                     alert("XML File : DataSets.xml cannot be loaded successfuly. Please check the path and try again.");
                }
           });
        });

   });
   </script>