Question

First, here is a JSfiddle with my work: http://jsfiddle.net/xzGxR/

The JavaScript:

function dataClonePrototype(JSOtarget, ElementPrototype, callback) {
    for (i = 0; i < JSOtarget.length; i++) {
        var TargetElement;
        if (!Eclone) { // Only create it on first interval
            TargetElement = $(ElementPrototype);
            var Eclone = TargetElement.clone(); // We only want to create a copy of this clone...
        } else {
            TargetElement = Eclone.clone().insertAfter(ElementPrototype);
        }
        callback(TargetElement, JSOtarget[i]);
    }
}

var returnedJSO = 
{
    "Animals": [
        {
            "Title": "Dogs",
            "Amount": 300
        },
        {
            "Title": "Pigs",
            "Amount": 230
        },
        {
            "Title": "Cats",
            "Amount": 340
        }
    ]
}

dataClonePrototype(returnedJSO.Animals, "section#animals", function(Element, JSOtargetAtKey) {
    Element.children("header").html(JSOtargetAtKey.Title);
    Element.children("article").html(JSOtargetAtKey.Amount);
});​

And the HTML:

<section id="animals">
     <header></header>
     <article></article>
</section>​

The output should (visually) look like this:

Dogs
300
Pigs
230
Cats
340

Yet, it looks like this.

Dogs
300
Cats
340
Pigs
230
Cats
340

The goal of this is to use the HTML and create clones of it – then populate these clones with data from the javascript object. It should populate like this:

<section id="animals">
   <header>Dogs</header>
   <article>300</article>
</section>​

Something is wrong with the code that clones, but I can’t figure out what. Any advice/help is really appreciated.

Answer 1

Try this jsFiddle

function dataClonePrototype(JSOtarget, ElementPrototype, callback) {

    $TargetElement = $(ElementPrototype);
    for (i = 0; i < JSOtarget.length; i++) {

        var $Eclone = $TargetElement.clone(); // We only want to create a copy of this clone...

        callback($Eclone, JSOtarget[i], $TargetElement);
    }
}


dataClonePrototype(returnedJSO.Animals, "section#animals", function($Element, JSOtargetAtKey, $Prototype) {
    $Element.children("header").html(JSOtargetAtKey.Title);
    $Element.children("article").html(JSOtargetAtKey.Amount)
        $Element.insertAfter($Prototype);
});​