title: fetch data to table using javascript
body: <p>I have a table filled with data (fetch from url) and that data is </p>
  
  <pre><code>{
    "id": "145127236",
    "mygoals": "success",
    "future": "high",
    "dole": {
      "Key": "fhd699f"
    }
  }
  </code></pre>
  
  <p>Under the table I have a select box (the data of it also fetched from url) its data is this </p>
  
  <pre><code>[{
      "id": "1111",
      "mygoals": "getmarried",
      "future": "married",
  
    },
    {
      "id": "2222",
      "mygoals": "getmarried",
      "future": "married",
  
    },
    {
      "id": "33333",
      "mygoals": "getmarried",
      "future": "married",
  
    }
  ]
  </code></pre>
  
  <p>what I want to achieve is that when user chooses from select box, then table should fill with that specific data which was chosen, i'm beginner with javascript learning, this should be easy task don't know how to do it, here is my code </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-html lang-html prettyprint-override"><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"&gt;
       &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&gt;
       &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
       &lt;style&gt;
       &lt;/style&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
       &lt;div class="container"&gt;
         &lt;table class="table table-responsive-sm "&gt;
           &lt;thead&gt;
             &lt;tr&gt;
               &lt;th&gt;id&lt;/th&gt;
               &lt;th&gt;mygoals&lt;/th&gt;
               &lt;th&gt;future&lt;/th&gt;
             &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody id="t"&gt;
           &lt;/tbody&gt;
           &lt;thead&gt;
             &lt;tr&gt;
               &lt;th&gt;id&lt;/th&gt;
               &lt;th&gt;mygoals&lt;/th&gt;
               &lt;th&gt;future&lt;/th&gt;
             &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody id="t2"&gt;
           &lt;/tbody&gt;
         &lt;/table&gt;
         &lt;select id="Select" name="name"&gt;&lt;/select&gt;
       &lt;/div&gt;
       &lt;script&gt;
         fetch("https://asdasd.free.beeceptor.com/a", {
           method: "GET",
           headers: {
             "x-api-key": "p*****w"
           }
         }).then(res =&gt; {
           res.json().then(t =&gt; {
             console.log(t);
             var p = "";
             var p2 = "";
  
             p += "&lt;tr&gt;";
             p += "&lt;td&gt;" + t.id + "&lt;/td&gt;";
             p += "&lt;td&gt;" + t.mygoals + "&lt;/td&gt;";
             p += "&lt;td&gt;" + t.future + "&lt;/td&gt;";
             p2 += "&lt;td&gt;" + t.id + "&lt;/td&gt;";
             p2 += "&lt;td&gt;" + t.mygoals + "&lt;/td&gt;";
             p2 += "&lt;td&gt;" + t.future + "&lt;/td&gt;&lt;/tr&gt;";
  
             document.getElementById("t").insertAdjacentHTML("beforeend", p);
             document.getElementById("t2").insertAdjacentHTML("beforeend", p2);
           })
         }).catch(err =&gt; {
           console.log("ERROR: " + err);
         });
  
         fetch("https:******.com/", {
           method: "GET",
           headers: {
             "x-api-key": "p*****w"
           }
         }).then(res =&gt; {
           res.json().then(t =&gt; {
             for (var i = 0; i &lt; t.length; i++) {
               var s = document.getElementById("Select");
               var o = document.createElement("option");
               option.text = t[i].id + ' ' + t[i].mygoals;
               s.add(o);
             }
           })
         })
  
       &lt;/script&gt;
     &lt;/body&gt;
  
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>