Unable to append external information to my webpage

JavaScript
1

I am trying to get information from a url and print it out on my mobile webpage. The details on the url are as follows:

object(Carbon\\Carbon)#11 (3) {
  ["date"]=>
  string(19) "2014-04-23 00:00:00"
  ["timezone_type"]=>
  int(3)
  ["timezone"]=>
  string(15) "America/Chicago"
}
{"bank":"-946.30","cash":"-89.46","daily_aim":"-47.08","spent_today":"824.00"}

I want to print out on my mobile webpage as follow:

Bank: $-946.30

Cash: $-89.46

Daily Budget: $-47.08

Today’s Expense: $824.00

The following is my codes but they are not working. Please advice what I am doing wrong. I looked up the API and following that. Thanks.

Script

$.getJSON( "http://testwebsite.com/test.html", function( data ) {
    var wrap = $("<div/>").attr('data-role', 'page');
    $("<p/>",{
        text:"Bank: $"+ data.bank
    }).appendTo(wrap);
    $("<p/>",{
        text:"Cash: $"+ data.cash
    }).appendTo(wrap);
    $("<p/>",{
        text:"Daily Budget: $"+ data.daily_aim
    }).appendTo(wrap);
    $("<p/>",{
        text:"Today's Expense: $"+ data.spent_today
    }).appendTo(wrap);
    wrap.appendTo('#budgetList');
});

HTML

<div data-role="page" id="budget" data-theme="e">
            <header data-role="header">
            <h1>Budget</h1>
        </header>
        <article data-role="content">
            <div id="budgetList">
                <!--fill up with info from url-->
            </div>
        </article>
        <footer data-role="footer" data-position="fixed">
                <h1></h1>
        </footer>
        </div>
2

Can you log data to the console in your success callback and post what it contains?

$.getJSON( "http://testwebsite.com/test.html", function( data ) {
    console.log(data);
});

You will obviously have to use a desktop browser to do this.