Update index.html

index.html

@@ -77,20 +77,23 @@
     <script>
         $(document).ready(function() {
             let isResultShown = false;
+            let facetData = [];
+
             $('#submit').click(function() {
                 const query = $('#query').val();
                 const givenFacet = $('#given_facet').val();
                 try {
-                    const facetObj = JSON.parse(givenFacet.replace(/'/g, '"'));
-                    generateBoxes(facetObj);
+                    facetData = JSON.parse(givenFacet.replace(/'/g, '"'));
+                    generateBoxes(facetData);
                     resetResult();
                 } catch (error) {
                     alert('Invalid facet format. Please enter a valid JSON array of objects.');
                 }
             });
+
             function generateBoxes(facetArray) {
                 const $dynamicBoxes = $('#dynamicBoxes').empty();
-                facetArray.forEach(facetObj => {
+                facetArray.forEach((facetObj, index) => {
                     const [key, values] = Object.entries(facetObj)[0];
                     const $box = $('<div>').addClass('bg-white rounded-lg shadow-md p-6 fade-in');
                     const $title = $('<div>').addClass('flex items-center justify-between mb-4')
@@ -98,6 +101,7 @@
                         .append($('<input>').attr({
                             type: 'checkbox',
                             name: key,
+                            'data-index': index,
                             class: 'form-checkbox h-5 w-5 text-blue-600'
                         }));
                     const $content = $('<div>').addClass('space-y-2');
@@ -108,14 +112,22 @@
                     $dynamicBoxes.append($box);
                 });
             }
+
             $('#getList').click(function() {
-                const checkedBoxes = $('input[type="checkbox"]:checked').map(function() {
-                    return `{'${this.name}': []}`;
-                }).get();
-                const result = `[${checkedBoxes.join(', ')}]`;
-                $('#result').text(result).addClass('fade-in');
+                const result = facetData.reduce((acc, facetObj) => {
+                    const [key] = Object.keys(facetObj);
+                    const $categoryCheckbox = $(`input[type="checkbox"][name="${key}"]`);
+                    if ($categoryCheckbox.is(':checked')) {
+                        acc.push(`'${key}'`);
+                    }
+                    return acc;
+                }, []);
+
+                const formattedResult = `[${result.join(', ')}]`;
+                $('#result').text(formattedResult).addClass('fade-in');
                 isResultShown = true;
             });
+
             $('#reset').click(function() {
                 $('input[type="checkbox"]').prop('checked', false);
                 if (isResultShown) {
@@ -123,6 +135,7 @@
                     isResultShown = false;
                 }
             });
+
             function resetResult() {
                 $('#result').text('').removeClass('fade-in');
                 isResultShown = false;