title: Load JSON Data Using jQuery AJAX
body: <p>I need to print this information when clicking a button and sorting if by date, so far i have this:  I have json file that looks like this, but I haven't been able to print it on the page and still haven't got to the sorting by date part. I am not sure if the problem is the link to the ajax version i am using or what is the problem, because i saw an example that looks just like this on youtube and it works just fine.</p>
  
  <p>JSON:</p>
  
  <pre><code>  [
  {
      "users": [
          {
              "name": "user1",
              "Endorsement": "some comment",
              "date": "8/11/2012"
          },
          {
              "name": "user2",
              "Endorsement": "some comment2",
              "date": "9/27/11"
          },
          {
              "name": "user3",
              "Endorsement": "some comment3"
          },
          {
              "name": "user4",
              "Endorsement": "some comment4",
              "date": "4/2/13"
          },
          {
              "name": "user5",
              "Endorsement": "some comment5"
          },
          {
              "name": "user6",
              "Endorsement": "some comment6",
              "date": "3/17/13"
          },
          {
              "name": "user7",
              "Endorsement": "some comment7",
              "date": "5/22/13"
          },
          {
              "name": "user8",
              "Endorsement": "some comment8",
              "date": "9/27/13"
          }
      ]
  }
  </code></pre>
  
  <p>]</p>
  
  <p>HTML updated:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Contact&lt;/title&gt;
      &lt;link rel="shortcut icon" href="stridesFavicon.ico"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap-responsive.css"&gt;
      &lt;link rel="shortcut icon" href='http://sites.google.com/site/lowcoupling/favicon_16x16.ico' /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Body content--&gt;
  
    &lt;div id='Div1'&gt;
  
  
      &lt;a href="#" id="clickme"&gt;Get JSON Data&lt;/a&gt;
  
  
      &lt;/div&gt;
  
  
      &lt;script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
  
      &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="myscript.js" type="text/javascript" /&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(function () {
              $('.dropdown-toggle').dropdown();
          });  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS updated:</p>
  
  <p>$("#clickme").click(function () {</p>
  
  <pre><code>$.getJSON("users.json", function (data) {
  
      var items = [];
      $.each(data, function (key, dvalue) {
  
  
          $.each(dvalue, function (key, value) {
              items.push('&lt;li id="' + key + '"&gt;' + value + '&lt;/li&gt;');
  
          });
      });
  
      $('&lt;ul/&gt;', {
          'class': 'interest-list',
          html: items.join('')
  
      }).appendTo('body');
  
  });
  
  });
  </code></pre>
  
  <p>But is not working. meaning is not loading user names; instead it is printing something like this every time i click the link:</p>
  
  <blockquote>
    <p>•[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]</p>
  </blockquote>