jquery - Replace HTML element with function

Question

I'm trying to replace the page_title div with the content of the name property. Below is what I have so far but it does not work. I'm new to jQuery any help. I'm using jquery Mobile.

 <script>
var siteData = {
    "name": "Site Name",
    "logo": "",
    "theme": "b",
    "fullSiteLink": "http://www.google.com",
    "pages": [{
            "id": "1364668689503",
            "name": "Page Title",
            "type": "basic",
            "components": {
                "img": "",
                "text": "Page content"
            }
        },
    }]
}
</script>

UPDATE

 $(document).ready(function(siteData) {
     //site name
     $('#page_title').html(siteData["name"]);
 });

Answer 1

Here's a working jsFiddle example: http://jsfiddle.net/Gajotres/gMAf3/

$(document).on('pagebeforeshow', '#index', function(){      
    $(this).find('[data-role="header"] h3').html(siteData.name);
});

     var siteData = {


         "name": "Site Name",
             "logo": "",
             "theme": "b",
             "fullSiteLink": "http://www.google.com",
             "pages": [
         {
             "id": "1364668689503",
             "name": "Page Title",
             "type": "basic",
             "components": {
                 "img": "",
                 "text": "Page content"
             }
         }     ]


     }

Don't use document ready with jQuery Mobile, it will usually trigger before page is inserted into the DOM. To find more about this problem take a look at this ARTICLE, or find it HERE.

Answer 2

$(document).ready(function () {

    // Declare the object here
    var siteData = {....};

    // Set the title
    $('#page_title').text(siteData["name"]);
});