从 JSON 制作 javascript var(数组）

在一个页面（API页面）上，我有一个这样的PHP数组：

$arr = array("headline1" =>
         array("name" => "Headline 1",
               "description" => "Description of headline 1",
               "items" => array(
                        array("name"=>"John", "lastname"=>"Doe"),
                        array("name"=>"Peter", "lastname"=>"Pan")
                        )
                ),
         "headline2" => array("name" => "Headline 2",
               "description" => "Description of headline 2",
               "items" => array(
                        array("name"=>"Alexander", "lastname"=>"Doe"),
                        array("name"=>"Steven", "lastname"=>"Smith")
                        )
                ),
         "headline3" => array("name" => "Headline 3",
               "description" => "Description of headline 3",
               "items" => array(
                        array("name"=>"John", "lastname"=>"Doeh"),
                        array("name"=>"Peter", "lastname"=>"Pans")
                        )
                )
         );

从这个数组中，脚本创建 json 编码版本：

echo json_encode($arr);

所以，我的问题是其他页面上的javascript。我想使用 jQuery $.getJSON 函数来检索这些数据并制作像这样的变量：

var categoryData = {
headline1: {
    name: "Headline 1",
    description: "Description of headline 1",
    items: [
        {
            name: "John",
            lastname: "Doe"
        },
        {
            name: "Peter",
            horoscope: "Pan"
        }
    ]
},
headline2: {
    name: "Headline 2",
    description: "Description of headline 2",
    items: [
        {
            name: "Alexander",
            lastname: "Doe"
        },
        {
            name: "Steven",
            horoscope: "Smith"
        }
    ]
},

headline3: {
    name: "Headline 3",
    description: "Description of headline 3",
    items: [
        {
            name: "John",
            lastname: "Doeh"
        },
        {
            name: "Peter",
            horoscope: "Pans"
        }
    ]
}
};

如何使用jQuery $.getJSON函数实现这一点？

编辑：

我的其他Javascript函数（jQuery移动函数）

    function showCategory( urlObj, options )
{
var categoryData = [];
$.getJSON('http://localhost/tst/sig.php', function(json) {
  categoryData = json;
});
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
    // Get the object that represents the category we
    // are interested in. Note, that at this point we could
    // instead fire off an ajax request to fetch the data, but
    // for the purposes of this sample, it's already in memory.
    category = categoryData[ categoryName ],
    // The pages we use to display our content are already in
    // the DOM. The id of the page we are going to write our
    // content into is specified in the hash before the '?'.
    pageSelector = urlObj.hash.replace( /'?.*$/, "" );
if ( category ) {
    // Get the page we are going to dump our content into.
    var $page = $( pageSelector ),
        // Get the header for the page.
        $header = $page.children( ":jqmData(role=header)" ),
        // Get the content area element for the page.
        $content = $page.children( ":jqmData(role=content)" ),
        // The markup we are going to inject into the content
        // area of the page.
        markup = "<p>" + category.description + "</p>",
        // The array of items for this category.
        cItems = category.items,
        // The number of items in the category.
        numItems = cItems.length;
    // Generate a list item for each item in the category
    // and add it to our markup.
    for ( var i = 0; i < numItems; i++ ) {
        markup += "<div data-role='collapsible' data-theme='a' data-content-theme='e'><h3>" + cItems[i].name + "</h3><p>"+ cItems[i].horoscope +"</p></div>";
    }
    markup += "</ul><p><a href='#one' data-rel='back' data-role='button' data-inline='true' data-icon='back'>Vratite se nazad</a></p>   ";
    // Find the h1 element in our header and inject the name of
    // the category into it.
    $header.find( "h1" ).html( category.name );
    // Inject the category items markup into the content element.
    $content.html( markup );
    // Pages are lazily enhanced. We call page() on the page
    // element to make sure it is always enhanced before we
    // attempt to enhance the listview markup we just injected.
    // Subsequent calls to page() are ignored since a page/widget
    // can only be enhanced once.
    $page.page();
    // Enhance the listview we just injected.
    $content.find( ":jqmData(role=collapsible)" ).collapsible();
    $content.find( ":jqmData(role=button)" ).button();
    // We don't want the data-url of the page we just modified
    // to be the url that shows up in the browser's location field,
    // so set the dataUrl option to the URL for the category
    // we just loaded.
    options.dataUrl = urlObj.href;
    // Now call changePage() and tell it to switch to
    // the page we just modified.
    $.mobile.changePage( $page, options );
        }
    }