title: How to catch data from JSON and display it with HTML
body: <p>So, I'm working on a project to create a "Twitter" page. The goal is to use the JSON file (<a href="http://vagalumewifi.com.br/timeline.json" rel="nofollow">http://vagalumewifi.com.br/timeline.json</a>) and to show some of the information contained in it. So far my page does not show anything, just the table heads. I tried saving the json file on my computer as well but still nothing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var posts = [];
    var sitioOnline = "http://vagalumewifi.com.br/timeline.json?callback=?";
    $.getJSON("timeline.json", function(data) {
      $.each(data.posts, function(i, f) {
        var tblRow = "&lt;tr&gt;" + "&lt;td&gt;" + f.user.username + "&lt;/td&gt;" + "&lt;td&gt;" + f.content + "&lt;/td&gt;" + "&lt;td&gt;" + f.user.location + "&lt;/td&gt;" + "&lt;td&gt; " + f.date + "&lt;/td&gt;" + "&lt;/tr&gt;"
        $(tblRow).appendTo("#entrydata tbody");
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;th&gt;UserName&lt;/th&gt;
        &lt;th&gt;Message&lt;/th&gt;
        &lt;th&gt;Location&lt;/th&gt;
        &lt;th&gt;Time&lt;/th&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
      &lt;/tbody&gt;
  
    &lt;/table&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>