last day (15 days later) » 

12:11 AM
0
Q: Why is append() adding markup multiple times as opposed to just once?

Shaun ChanderI'm using jQuery's append() and the forEach() function to map through an array of objects, displaying the data to a slideshow. Although the array has one object in it, the resulting markup has extra data, essentially the append() method is appending the same markup 2x or more times. I've tried ...

 
$('.siema-home').append(...) will append the string to ever element matching that class in the DOM
 
featuredItems.forEach(function(item) { << Your .append() call is inside of this loop. If the loop iterates more than once, you'll get multiple items appended.
 
@Taplar $(".siema-home") only appears once in the markup.
 
That means that your JSON is returning 3 featuredItems. The append fires one time for each featuredItems result.
 
And you are performing that operation multiple times, via a forEach
 
12:11 AM
Can you please show us your "featuredItems" ?
 
@ScottMarcus The idea was to use the forLoop to iterate through an array of objects and display the data in a slideshow. The issue is that even though the array length is 1, the append() method will append markup multiple times
 
If your append() function is adding multiple things, it is because you have multiple things in your variable. Please show us the array/object you're using to get a better understanding.
 
Here is the output w/ console i.imgur.com/aapuXeu.png @MauricioCárdenas
 
Your picture shows the array has a length of 1. So given that the element is showing multiple times, that is an indicator that there are two elements on the page with the siema-home class
 
@Taplar the first entry in the console (see above screenshot) is the output of console.log(featuredItems)
@Taplar I've checked my index.html w/ CTRL + F. There are three instances of "siema-home", one for <div class="siema-home">..., another for $(".siema-home"), and lastly a "siema-home" as a parameter in the instantiation of the slider class. I don't see another instance of ".siema-home" being used anywhere in the DOM.
 
12:11 AM
Also please show us a more complete example of your logic. Your picture shows logs that your snippet in the question does not have. From what you have given us, there are three possible reasons it is duplicating. 1) the class is in the DOM twice. 2) The array contains multiple elements. 3) You are repeating your ajax call twice, thus doubling the results. From your snippet we do not have any context into how the ajax is being executed.
 
@Taplar I've provided the entire index.html file here: hastebin.com/obuhoqikin.xml
 
Please edit your question to include all the relevant code and debugging information. Don't post relevant information to 3rd party sites.
 
If you pop open your developer console and type $('.siema-home').length, what does it return? I'm curious if that slider class is creating another element dynamically with that class.
 
@Taplar it returns 1, i.imgur.com/brPGoKC.png
 
Ok, that's really weird. jsfiddle.net/6juctdyh Try placing some console logs in the logic similar to in this fiddle. So we can see how many time the json is being called and other details. From what I can see in your page and logic, the json should only be executing once, and yeah, the class is only there once.
 
12:11 AM
Could you provide the rendered HTML rather than the source HTML?
 
@Taplar here are your logs: i.imgur.com/OLTcSpM.png
@APAD1 Sure, I'll get it setup on JSFiddle (or dev site) in a bit.
 
Only other thing I can think of is comment out the slider logic and see if it is still duplicated.
 
@Taplar I can try that
I looked through version control and luckily enough I found a version where the slider is fixed, I can't really revert back to it though since there are current changes I don't want to lose, if I can carefully just copy and paste the code from the old version to the new version then it should, hopefully, fix itself. I'll let you guys know of the outcome
So good news/bad news, I reverted to an older version and got the slider (and the append method) to work again, though I'm still curious to know why this was happening.
 
So, for the readers, are we saying the issue is related to the slider, not the append?
 
@Taplar I think it goes for both since the append was adding multiple items when it shouldn't and the slider wasn't displaying the children being appending correctly.
 
12:11 AM
That's just the thing though. append() will not do that. It only adds what you are appending once to each element in the result stack. If that was not the case, then you would not be the only developer rasing h3ll and telling jQuery to fix it.
 
The append() is working right, most likely it is going to be the slider. I just had some time to review your code, and I didn't find any problem with the append() logic. I even tried it in localhost with just the object you provided.
 

last day (15 days later) »