title: How to get data from http site into a html table using javascript?
body: <p>I'm trying to get data from the following site: <a href="https://stryk.herokuapp.com/tipset" rel="nofollow noreferrer">https://stryk.herokuapp.com/tipset</a>
  As can be seen, the site seems to contain a list of objects.
  What I want to do is to get each object within {} in a row as separate columns (6 columns in total, one for gameNumber, one for teams and 3 for result in the following order 1 X 2 with a green checkmark for whatever the result for that game was).
  The table should update live when the results are updated on the original website.</p>
  
  <p>My main issue is how do I get the data from the website in a managable format?</p>
  
  <p>I've tried to use the jQuery $.get() Method, but maybe I'm not applying it correctly?
  Here is my current javascript code, I set the obj var as a test list, so I know that the "table-building" code works.
  The alert is just added to see what type of data I'm getting( seems to be a list of: [object, Object], [object, Object] .... and so forth, which I don't really understand) </p>
  
  <pre><code>
    $.get("https://stryk.herokuapp.com/tipset", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  
  var obj = $.get("https://stryk.herokuapp.com/tipset", function(data){
  var globalCounter = 0;
  var tbody = document.getElementById('tbody');
  for (var i = 0; i &lt; Object.keys(obj).length; i++) {
      var tr = "&lt;tr&gt;";
  
      tr += "&lt;td&gt;" + obj[i].gameNumber + "&lt;/td&gt;" + "&lt;td&gt;" + obj[i].teams.toString() + "&lt;/td&gt;" + "&lt;td&gt;" + obj[i].outcome + "&lt;/td&gt;&lt;/tr&gt;";
      table.innerHTML += tr;
  }
  })
  </code></pre>
  
  <p>Html part, obs, I'm not allowed to change anything in the html and css part other than adding the script tag, they're just added here for reference.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;JS - Examination&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="assets/css/index.css" /&gt;
      &lt;link rel="shortcut icon" href="assets/img/fotboll.png" type="image/png"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script scr="assets/js/index.js" type="module"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;header&gt;
          &lt;h1&gt;FOTBADSKOLLEN&lt;/h1&gt;
          &lt;p class="smallLogo"&gt;FÖR DIG SOM SPARKAR BOLL&lt;/p&gt;
      &lt;/header&gt;
  
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li id="active"&gt;&lt;a href="#"&gt;stryket&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;bänken&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;korvmojjen&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;lagen&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
  
      &lt;main&gt;
          &lt;h1&gt;Stryk&lt;img id="fotball" src="assets/img/fotboll.png"&gt; tipset&lt;/h1&gt;
          &lt;p&gt;-först till 13rätt vinner!&lt;/p&gt;
          &lt;hr /&gt;
  
          &lt;table id="table"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Rad:&lt;/th&gt;
                  &lt;th&gt;Lag:&lt;/th&gt;
                  &lt;th&gt;1&lt;/th&gt;
                  &lt;th&gt;X&lt;/th&gt;
                  &lt;th&gt;2&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/main&gt;
  
      &lt;footer class="text-center"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Kontakta oss&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Om oss&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Rapportera fel&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;h2&gt;TIPSA OSS&lt;/h2&gt;
          &lt;p&gt;
              Vi är ständigt på jakt efter de senaste skvallren vad gäller fotbollsproffs och deras partners &lt;br /&gt;
              Har du ett tips eller kanske filmat något själv? &lt;br /&gt;
              Hör av dig via denna länken: &lt;a href="#"&gt; TIPSA OSS&lt;/a&gt;
          &lt;/p&gt;
          &lt;br /&gt;
          &lt;hr /&gt;
          &lt;br /&gt;
          &lt;p&gt;
              Din väg från bänken rakt in i målet!&lt;br&gt;
              &amp;copy; Fotbadskollen
              &lt;script type="text/javascript"&gt;
                  document.write(new Date().getFullYear());
              &lt;/script&gt;
          &lt;/p&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Css part: Maybe it's not relevant?...</p>
  
  <pre class="lang-css prettyprint-override"><code>
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
      vertical-align: baseline;
      background: transparent;
  }
  
  @font-face {
      font-family: FjallaOne-Regular;
      src: url("../fonts/FjallaOne-Regular.otf") format("opentype");
  }
  
  html {
      background: url('../img/bg.jpg') #fff no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  body {
      font-family: Verdana;
      color: #000;
  }
  
  header {
      height: 100px;
      color: #000;
      text-align: center;
  }
  
  header p {
      font-size: 4em;
      width: 960px;
      margin: 0 auto;
  }
  
  .smallLogo {
      font-size: 2em;
      font-style: italic;
  }
  
  nav {
      margin-top: 60px;
      background-color: rgba(255, 255, 255, 0.9);
      height: 70px;
      text-transform: uppercase;
      font-weight: 400;
      letter-spacing: 2px;
      text-align: center;
  }
  
  ul {
      padding-top: 25px;
      list-style-type: none;
      text-align: center;
  }
  
  li {
      display: inline-block;
      margin-left: 40px;
  }
  
  a {
      color: #000;
      text-decoration: none;
  }
  
  #active a {
      color: red;
  }
  
  a:hover {
      text-decoration: underline;
  }
  
  main {
      background-color: rgba(255, 255, 255, 0.9);
      width: 960px;
      margin: 40px auto 0 auto;
      padding: 30px;
      text-align: center;
  }
  
  main table {
      margin: 0 auto;
      width: 92%;
      text-align: center;
  }
  
  main table tr td:first-child, main table tr th:first-child {
      text-align: left;
  }
  
  #fotball {
      opacity: 1;
  }
  
  .checkmark {
      display: inline-block;
      width: 22px;
      height: 22px;
      -ms-transform: rotate(45deg);
      /* IE 9 */
      -webkit-transform: rotate(45deg);
      /* Chrome, Safari, Opera */
      transform: rotate(45deg);
  }
  
  .stem {
      position: absolute;
      width: 5px;
      height: 11px;
      background-color: green;
      left: 11px;
      top: 6px;
  }
  
  .kick {
      position: absolute;
      width: 5px;
      height: 5px;
      background-color: green;
      left: 8px;
      top: 12px;
  }
  
  main hr {
      margin: 40px;
  }
  
  main p {
      padding-left: 250px;
  }
  
  .text-center {
      text-align: center;
  }
  
  .text-bold {
      font-weight: bold;
  }
  
  footer {
      background-color: rgba(255, 255, 255, 0.9);
      padding-bottom: 25px;
  }
  
  footer nav {
      background-color: transparent;
  }
  
  footer hr {
      max-width: 960px;
  }
  
  table {
      text-align: left;
  }
  
  hr {
      height: 0;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      border: 0;
      border-top: 1px solid #999999;
  }
  
  .red {
      color: red;
  }
  
  h1, h2, nav, header {
      font-family: FjallaOne-Regular;
  }
  
  h1 {
      font-size: 4em;
  }
  
  h2 {
      font-size: 1.5em;
  }
  
  footer h2 {
      color: red;
  }
  </code></pre>
  
  <p>I'm simply not getting any updates on my html site table, I want it to be updated live upon updates on the source webbpage.
  I also would like to have a green checkmark for the results instead of the numbers with the following code: </p>
  
  <pre><code>&lt;span class="checkmark"&gt;
              &lt;div class="stem"&gt;&lt;/div&gt;
              &lt;div class="kick"&gt;&lt;/div&gt;
          &lt;/span&gt; 
  </code></pre>
  
  <p>But how should this be included in the javascript?</p>