Question

Im having some trouble displaying some JSON objects. If the object is displayed using $.each() then it will display on screen twice. If I dont use $.each() to display the object then it displays once. The example shows below that the ruler content will be loaded twice, but the text content will only be loaded in once.

The JSON file is only called once. I checked this up using Firebug.

Im using jQuery 1.8.0 and using the history.js plugin

The JSON file validates using jsonlint.com.

I need to find out why the elements are being displayed twice. Any help is appreciated.
Thanks

The code:

function JSONLoader(page)
{
    //The page is "about" page then..
    if(page == 'about')
    {

        $.getJSON('about.json', function(data, textStatus){
            var htmlRuler="";
            $.each(data.person, function(pageIndex, page){  

                //The ruler content will load in twice
                if(page.RulerDiv){
                    htmlRuler += '<ul>';
                    $.each(page.RulerDiv,function(rulerIndex, ruler){
                        htmlRuler += '<li><img class="'+ruler.imgClass+'" src="'+ruler.imgURI+'" alt="'+ruler.imgAlt+'" title="'+ruler.imgTitle+'"/></li>';                         
                    });
                    htmlRuler += '</ul>';
                }                       
                $('.RulerDiv').append(htmlRuler).fadeIn('slow');

                //This loads the text in once only.
                if(page.TextDiv){
                    var htmltext = '<p class="' + page.TextDiv.textClass+'">'+ page.TextDiv.Text + '</p>';      
                }
                $('.TextDiv').append(htmltext).fadeIn('slow');
            });
        });
    }
}

Some sample JSON for this. The array RulerDiv would be implemented twice.

{
"person": {
    "page": {
        "RulerDiv": [
                {
                    "imgURI": "../img/rulerButton.png",
                    "imgTitle": "",
                    "imgClass": "hover whoRulerDivImg",
                    "imgAlt" : ""
                },
                {
                    "imgURI": "../img/rulerButton2.png",
                    "imgTitle": "",
                    "imgClass": "hover RulerDivImg",
                    "imgAlt" : ""
                }
            ],
        "TextDiv": {
            "wText" : "He is alive",
            "textClass" : "fontClass"
        }
    }
}

}

Answer 1

FIXED

The problem was that I was iterating over the data twice. Taking out the first .each() and changing the code to the code below fixes this bug.

$.getJSON('about.json', function(data, textStatus){
            var htmlRuler="";  

            if(data.person.page.RulerDiv){
                htmlRuler += '<ul>';
                $.each(data.person.page.RulerDiv,function(rulerIndex, ruler){
                    htmlRuler += '<li><img class="'+ruler.imgClass+'" src="'+ruler.imgURI+'" alt="'+ruler.imgAlt+'" title="'+ruler.imgTitle+'"/></li>';                         
                });
                htmlRuler += '</ul>';
            }                       
            $('.RulerDiv').append(htmlRuler).fadeIn('slow');