Duplicate item appearing in DIV

Question

I have a problem with my code. I am pushing items into a new array and displaying two of them in a DIV. For some reason its showing the same item twice rather than showing two separate items. Hoping someone can help me out with this. I just need a way to prevent the same recipe from being able to show twice in the DIV.

     var categoryItems = [];
     var recipeTitle = $('#recipeTitle').text();

     $.each(recipe_data, function(i, item){
        if (item.recipeCategory == "4" && recipeTitle !== item.recipeName) { categoryItems.push(item); }
     });

     var similarRecipe = '';
     var randomRecipe = {};

     randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
     for(var i = 0; i < categoryItems.length; i += 2) {
        similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>' 
        + '<a href="' + randomRecipe.recipePageURL +'">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
        + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>' ]; 
        $('#recipeSimilar').append(similarRecipe);  
     }

Edit: Please take a look at this fiddle for an example. It should not show the same recipe twice when refreshing, rather show two different recipes from the category. My problem is that is is sometimes it is showing the same one twice when you refresh. https://jsfiddle.net/wn4fmm5r/

Please make a fiddle. We need to see what are `recipe_data` data — Mojtaba, Feb 15 '17 at 15:19
You're missing a brace for the `if` within the `each`. I suspect that's not the actual problem but do fix that. — Justin Hellreich, Feb 15 '17 at 15:20
thanks fixed that. i actually have that in my code just didnt copy over — Tom, Feb 15 '17 at 15:21
randomRecipe never changes. You define it before the for loop. Define randomRecipe inside the loop so that every time it executes, you have a new randomRecipe. Also, why is your loop +=2? — VVV, Feb 15 '17 at 15:34
im doing that because i only want to show two recipes in the div. i moved randomRecipe into the loop but still after a few refreshes it will eventually show a dup — Tom, Feb 15 '17 at 15:38
What is your exxact requirement, refreshing will anyways remove all you contect, I doubt if you want random not to repeat after refresh you will need to use sessions or cookies — Abhinav, Feb 15 '17 at 16:42
@Mojtaba here is a fiddle thanks https://jsfiddle.net/wn4fmm5r/ — Tom, Feb 15 '17 at 16:49
@user7417866 all im trying to do is prevent the same item from showing twice — Tom, Feb 15 '17 at 16:50
@user7417866 take a look at this https://jsfiddle.net/wn4fmm5r/ you will see what i mean — Tom, Feb 15 '17 at 16:50
ok so your concrn is not to repeat same receip on same refresh but you ok to display previous refresh receipe in new one — Abhinav, Feb 15 '17 at 16:59
yeah just when i refresh it shouldnt show the same recipe twice, rather show two completely different ones — Tom, Feb 15 '17 at 17:00

Abhinav · Accepted Answer · 2017-02-15T17:57:30.493

you are generating one random Recipe and displaying same twice into your for loop

randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
     for(var i = 0; i < categoryItems.length; i += 2) {
        similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>' 
        + '<a href="' + randomRecipe.recipePageURL +'">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
        + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>' ]; 
        $('#recipeSimilar').append(similarRecipe);  
     }

try including your statement for generating random recipe inside loop.

     for(var i = 0; i < categoryItems.length; i += 2) {
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
        similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>' 
        + '<a href="' + randomRecipe.recipePageURL +'">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
        + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>' ]; 
        $('#recipeSimilar').append(similarRecipe);  
     }

Edit for no repeating ----

var counter;
for (var i = 0; i < categoryItems.length; i += 2) {
    var item = Math.floor(Math.random() * categoryItems.length);
    if (!counter) {
        counter = item;
    } else {
        if (counter == item) {
            item = Math.floor(Math.random() * categoryItems.length);
            counter = item;
        }
    }
    randomRecipe = categoryItems[item];
    similarRecipe = ['<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL + '" data-title="' + randomRecipe.recipeName + '"></div>'
    + '<a href="' + randomRecipe.recipePageURL + '">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>'
    + '<a href="' + randomRecipe.recipePageURL + '">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>'];
    $('#recipeSimilar').append(similarRecipe);
}

ok this works but it actually still shows a duplicate after a couple refreshes. — Tom, Feb 15 '17 at 15:24
that's because you cannot say random value will not repeat into your Math.Random() function. — Abhinav, Feb 15 '17 at 15:26
if you want to makesure random will not repeat try storing your old values into some variable outside loop and check your new values with old one's if repeat generate new random values. — Abhinav, Feb 15 '17 at 15:27
have a look over this.. http://stackoverflow.com/questions/18806210/generating-non-repeating-random-numbers-in-js also make sure your recipe_data don't repeat — Abhinav, Feb 15 '17 at 15:51
hey simply you can also try adding your i variable to your random generator, that should fix — Abhinav, Feb 15 '17 at 16:14
just add +i in randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)] like randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)+i] — Abhinav, Feb 15 '17 at 16:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135785/discussion-between-tom-and-user7417866). — Tom, Feb 15 '17 at 16:33

Duplicate item appearing in DIV

1 Answers1