avoid repeating of result using JavaScript or jQuery

Question

Hi guys I have been wondering how can I avoid displaying of the same result on JavaScript or jQuery using for loop

Here is my code:

function displayData(e)
{
var html = '';
var html2 = '';
var x = '';

var mapDiv = document.getElementById('mapContainer'), i = 0,
     dataIndex, tooltipDiv, key
mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
var divCont = $(mapDiv).find('#rightdiv'), index = 0;
for (i = 0; i < mapMarkers.length; i++)
{

    if (e.target.parentNode.parentNode == mapMarkers[i])
    {
        index = i;

    }
}

html += '<div id="infocontainer">';
html += '<div class="p-image"><img src="src/images/retrofit.png"/></div>';
html += '<div class="popupdetail">';
html += '<div class="p-name"> Site Name: ' + flsSites[index].site_name + '</div>';
html += '<div class="p-name"> Site Status: ' + flsSites[index].status + '</div>';
html += '<div class="p-name"> Country: ' + flsSites[index].country_name + '</div>';
html += '</div>';
html += '</div>';




html2 += '<div class="rightcontainer">';
html2 += '<img id="productimage" src="src/images/retrofit.png" onclick="DisplayProfileCard();"/>';
html2 += '<div id="imagedetail">';
html2 + '<input type="hidden" value='+ flsSites[index].serial_number +'/>';
html2 += '<span class="details">Product Type:' + flsSites[index].serial_number +'</span>';
html2 += '<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>';
html2 += '<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>';
html2 += '<span class="details">Site name / manufacturer</span>';
html2 += '<span class="details">Selling Sales Eng</span>';
html2 += '</div>'
html2 += '</div>';

if (!document.getElementById('map_tooltip')) 
{
    tooltipdiv = $("<div></div>").attr('id', "map_tooltip");
    $(document.body).append(tooltipdiv);
    $(tooltipdiv).css({
        "display": "none", "padding": "5px",
        "position": "absolute",
        "z-index": "13000",
        "cursor": "default",
        "font-family": "Segoe UI",
        "color": "#707070",
        "font-size": "12px", "pointer-events": "none",
        "background-color": "#FFFFFF",
        "border": "1px solid #707070"
    });
}
else
{

    tooltipdiv = $("#map_tooltip");
    $(tooltipdiv).css({
        "left": (e.pageX + 5),
        "top": (e.pageY + 5)
    });
    $(tooltipdiv).html(html).show("slow");
    //$('#defaulttext').hide();
    //$('#searchcontainer').append(html2);
    //$('.rightcontainer').eq($(this).index()).addClass('background');
    $(html2).appendTo("#searchcontainer");
}

Now in this code I was able to display my result on a div by hovering on a marker on the map but if I return on my previous hovered marker instead of highlighting its corresponding result, it will just make another rendering of the same result below in which I dont need

bitifet · Accepted Answer · 2017-10-12 06:17:21Z

1

You can use a Set object to store each result you renderer and check if it is already there before to render each one.

Unfortunately that Set objects aren't supported in older browsers.

But you can emulate it by simply using the keys of a regular object. For example:

var Idx = {};
function renderOne(flsSite) {
    if (Idx[flsSite.name]) return; // Here I suppose same name => same result.
    Idx[flsSite.name] = true; // Mark as rendered.
    // Do render...
};

Hope it helps...

answered Oct 12, 2017 at 6:17

bitifet

3,74919 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

avoid repeating of result using JavaScript or jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related