title: Make the javascript var (array) from JSON
body: <p>On one page (API page) I have a PHP array like this:</p>
  
  <pre><code>$arr = array("headline1" =&gt;
           array("name" =&gt; "Headline 1",
                 "description" =&gt; "Description of headline 1",
                 "items" =&gt; array(
                          array("name"=&gt;"John", "lastname"=&gt;"Doe"),
                          array("name"=&gt;"Peter", "lastname"=&gt;"Pan")
                          )
                  ),
           "headline2" =&gt; array("name" =&gt; "Headline 2",
                 "description" =&gt; "Description of headline 2",
                 "items" =&gt; array(
                          array("name"=&gt;"Alexander", "lastname"=&gt;"Doe"),
                          array("name"=&gt;"Steven", "lastname"=&gt;"Smith")
                          )
                  ),
           "headline3" =&gt; array("name" =&gt; "Headline 3",
                 "description" =&gt; "Description of headline 3",
                 "items" =&gt; array(
                          array("name"=&gt;"John", "lastname"=&gt;"Doeh"),
                          array("name"=&gt;"Peter", "lastname"=&gt;"Pans")
                          )
                  )
           );
  </code></pre>
  
  <p>And from this array the script creates json encoded version :</p>
  
  <pre><code>echo json_encode($arr);
  </code></pre>
  
  <p>So, my problem is with javascript on other page. I want to use jQuery $.getJSON function to retrieve this data and make var like this:</p>
  
  <pre><code>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"
          }
      ]
  }
  };
  </code></pre>
  
  <p>How can I achieve this with jQuery $.getJSON function?</p>
  
  <p>EDIT : </p>
  
  <p>My other Javascript function (jQuery mobile function)</p>
  
  <pre><code>    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 = "&lt;p&gt;" + category.description + "&lt;/p&gt;",
  
          // 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 &lt; numItems; i++ ) {
          markup += "&lt;div data-role='collapsible' data-theme='a' data-content-theme='e'&gt;&lt;h3&gt;" + cItems[i].name + "&lt;/h3&gt;&lt;p&gt;"+ cItems[i].horoscope +"&lt;/p&gt;&lt;/div&gt;";
      }
      markup += "&lt;/ul&gt;&lt;p&gt;&lt;a href='#one' data-rel='back' data-role='button' data-inline='true' data-icon='back'&gt;Vratite se nazad&lt;/a&gt;&lt;/p&gt;   ";
  
      // 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 );
          }
      }
  </code></pre>