jQuery appending new elements to dom with data from json

Question

hi there i am writing a script to read data from some json

I want to do a few things:

loop through the data and add new <divs> containg the data from the json

i would like to have 3 items per row

this is my first time trying to use this method of adding divs to the dom i want to generate the rows (the json sample data i have attached only has 1 entry) my intended html structure is as follows: (the relatedDetails and related header divs already exist on the page.

<div class="relatedDetails">
    <div class="relatedHeader">Unit Bases near by:</div>
    <div class="detailRow">
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
    </div>
    <div class="detailRow">
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
    </div>
</div>

my json looks like this:

[{"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. External features unavaliable at present"}]

i have written some jquery to parse this data and create the above structure, but its not adding the divs to the dom.

not sure if its to do with how i am using variables to access the classes, so i know which row/related item <divs> i want to append too, or something else.

my jquery is as follows:

function createRelated(myRelated){
        alert('create related')
        console.log(myRelated);
        var relCount = 0;
        var rowCount = 0;
        var itemCount = 0;
        $.each(myRelated, function() {
            if(relCount == 3){
                relCount = 0;
            };
            // create a new row
            if(relCount = 0){
                var rowClass = 'relRow'+rowCount;
                $("<div/>",{
                    "class": "detailRow "+rowClass
                }).appendTo( ".relatedDetails" );
                rowCount++;
            }
            // create a new related item div
            var itemClass = 'item'+itemCount;
            $("<div/>",{
                "class": "relatedItem "+itemClass,
            }).appendTo(rowClass);

            //add the data to the related item
            $(itemClass).data('location',this);
            //add item to to our row
            $(rowClass).append(itemClass);
            // now loop through the keys and values and add the data
            $.each(this, function(k, v) {
                //add divs to the related item div          
                });
            itemCount++;
            relCount++;
        });
    };

test page at: http://2012.reelfilmlocations.co.uk/Modules/builder_areaLocs.php

* UPDATE * I have created a js fiddle here: http://jsfiddle.net/DizzyHigh/35Jrc/2/

the divs are sinpmy not getting created, i have no idea why :(

Answer 1

it turns out i am incredibly stupid.....

if(relCount = 0){
    //do stuff
}

should be

if(relCount == 0){
    //do stuff
}

Answer 2

In your sample code you never append() your new row to the document. When you're done generating all your elements, you need to get a reference to the point you want to insert it into the document, and append your new elements to it:

$(rowClass).appendTo("#WhereIWantMyData");

Where you have some element in your HTML with id="WhereIWantMyData" that you want your data inserted into.