Confirmation dialog does not show duplicated text values

Question

I am writing a website where I show certain items (from the game). Info about market names of these items are retrieved from third-party API. Next step is that for every item, there is created div that contains market name of the item. There could be situations where there are two or more div's containing same text values such as "Item 1" and "Item 1". And it is perfectly fine situation. Website also allows to highlight relevant items (click on a div). There is also "Confirm" button. After clicking it, there is generated confirmation dialog that shows names of highlighted items. The issue is that when there are two div's with same text values selected, confirmation dialog does not show these repeated text values at all.

`<script>
$(document).ready(function() {
    var selectedSkins = [];

    $('.market-names').on('click', '.market-name', function() {
        $(this).toggleClass('highlighted');
        var marketName = $(this).text();

        // Add or remove the market name from the selected skins array
        var index = selectedSkins.indexOf(marketName);
        if (index === -1) {
            selectedSkins.push(marketName);
        } else {
            selectedSkins.splice(index, 1);
        }
    });

    $('#confirm-button').on('click', function() {
        if (selectedSkins.length > 0) {
            var itemCounts = {};

            // Count the occurrences of each item name
            selectedSkins.forEach(function(skin) {
                if (itemCounts.hasOwnProperty(skin)) {
                    itemCounts[skin]++;
                } else {
                    itemCounts[skin] = 1;
                }
            });

            var confirmationContent = "<h3>Confirmation</h3>";
            confirmationContent += "<ul>";

            // Iterate over the selected item names
            Object.keys(itemCounts).forEach(function(skin) {
                // Display the item name with the count if it occurs more than once
                if (itemCounts[skin] > 1) {
                    confirmationContent += "<li>" + skin + " (x" + itemCounts[skin] + ")" + "</li>";
                } else {
                    confirmationContent += "<li>" + skin + "</li>";
                }
            });

            confirmationContent += "</ul>";
            confirmationContent += "<button id='close-button'>Close</button>";

            // Create and display the confirmation dialog
            var confirmationDialog = $('<div>').addClass('confirmation-dialog').html(confirmationContent);
            $('body').append(confirmationDialog);

            // Handle the close button click event
            $('#close-button').on('click', function() {
                confirmationDialog.remove();
            });
        }
    });
});
</script>`

Welcome to Stack Overflow! This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Jun 20 '23 at 21:25
It's generally quite hard to debug JS code when we can't see the HTML it is supposed to be working with. Please try to provide a [mre] of the issue. You can [edit] your post. Thanks. — ADyson, Jun 20 '23 at 21:34
Have you logged `itemCounts[skin]` before setting `ConfirmationContent`? I suspect is has to do with `selectedSkins.splice(index, 1);`. You only push the market name if it doesn't exist in `selectedSkins`; if it already exists, you delete it with `splice(index,1)`. — mykaf, Jun 20 '23 at 21:35
Instead of having two variables `selectedSkins` and `itemCounts`, why not just update `itemCounts` in the click listener? — Barmar, Jun 20 '23 at 21:38
It looks like you didn't test it enough yourself or if you did, there is no info about it. Don't expect others to debug your code. Use `console.log` to see the value of the array and only then you will know the issue is. — Djumaka, Jun 20 '23 at 21:47

score 0 · Answer 1 · answered Jun 22 '23 at 20:34

Thanks to all for answers. I actually managed to correct it myself:

<script>
$(document).ready(function() {
    var selectedSkins = [];

    $('.market-names').on('click', '.market-name', function() {
        $(this).toggleClass('highlighted');
        var marketName = $(this).text();

        // Check if the market name is already in the selected skins array
        var index = selectedSkins.findIndex(function(skin) {
            return skin.name === marketName;
        });

        if (index === -1) {
            // If the market name is not found, add it to the array with count 1
            selectedSkins.push({ name: marketName, count: 1 });
        } else {
            // If the market name is found, increment its count
            selectedSkins[index].count++;
        }
    });

    $('#confirm-button').on('click', function() {
        if (selectedSkins.length > 0) {
            var confirmationContent = "<h3>Confirmation</h3>";
            confirmationContent += "<ul>";

            // Iterate over the selected skins
            selectedSkins.forEach(function(skin) {
                // Display the skin name with the count if it occurs more than once
                if (skin.count > 1) {
                    confirmationContent += "<li>" + skin.name + " (x" + skin.count + ")" + "</li>";
                } else {
                    confirmationContent += "<li>" + skin.name + "</li>";
                }
            });

            confirmationContent += "</ul>";
            confirmationContent += "<button id='close-button'>Close</button>";

            // Create and display the confirmation dialog
            var confirmationDialog = $('<div>').addClass('confirmation-dialog').html(confirmationContent);
            $('body').append(confirmationDialog);

            // Handle the close button click event
            $('#close-button').on('click', function() {
                confirmationDialog.remove();
            });
        }
    });
});
</script>

Confirmation dialog does not show duplicated text values

1 Answers1