title: How to I parse a JSON file to display it's elements in a html table cells
body: <p>I am trying to build a dashboard which is a table with multiple columns and rows. I have a URL(provided by the backend team) which has JSON data. Now, I have to read that data from that URL and display it in the cells of the HTML table.</p>
  
  <p>I have to use something called asynchronous calls so that the latest data from the database is shown in the table. I tried following <a href="https://www.youtube.com/watch?v=6mT3r8Qn1VY" rel="nofollow noreferrer">https://www.youtube.com/watch?v=6mT3r8Qn1VY</a> and like how he's using a JSON file, so have I tried to use a JSON file. But, I don't get anything in my console.log unlike him. I am new to javascript and don't really know how to go about it. I know the basic concept that I have to loop over the file and change the inner HTML of each cell, but I can't get started.</p>
  
  <p>The HTML file is like this for one row:</p>
  
  <pre><code>&lt;head&gt;
  
         &lt;link rel="stylesheet" href="index.css"&gt;
             &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"&gt;&lt;/script&gt;
  
             &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"&gt;&lt;/script&gt;
  
              &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"&gt; 
        &lt;/script&gt;
  
             &lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /&gt;
  
              &lt;script src="daterange.js" type="text/javascript"&gt;&lt;/script&gt;
  
              &lt;script src="get-data.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
         &lt;br&gt;
         &lt;h1&gt;Demo Request Customer Database&lt;/h1&gt;
          &lt;br&gt;
           &lt;div class=""&gt;
          &lt;form  class="row" method="post"&gt;
              &lt;input type="text" id="myinput" placeholder="Search by email..." name="" value=""&gt;
  
          &lt;input type="text" name="daterange" id="date-range" value="01/01/2018 - 01/15/2018" /&gt;
  
                   &lt;input type="submit" name="" value="Save changes" id="save_button"&gt;
  
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;table cellpadding="5" style="width:100%;" id="mytable" class="fixed"&gt;
  
  
  
      &lt;thead&gt;
                 &lt;tr class="header" id="header" style="color:#ffffff"&gt;
                   &lt;th class="tab_header"&gt;Email&lt;/th&gt;
                   &lt;th class="tab_header"&gt;Name&lt;/th&gt;
                   &lt;th class="tab_header"&gt;Position&lt;/th&gt;
                  &lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody id="body_rows"&gt;
                  &lt;/tbody&gt;
  
  
  
        &lt;/table&gt;
  
          &lt;br&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The Javascript file is : </p>
  
  <pre><code>function setup(){
        loadJSON("example.json",gotData);}
  
        function gotData(data){
            console.log(data);
        }
  </code></pre>
  
  <p>The example.JSON file is :</p>
  
  <pre><code>    [
        {
              "email": "abhinav@musiio.com",
               "name": "Abhinav",
               "position":"software eng"
  
          },
      ]
  </code></pre>
  
  <p>I basically want to capture JSON data from a URL that will be provided to me by the backend team. But for the time being, I am trying to display the JSON data in the HTML row from the example.JSON file.</p>