title: Convert json file to dynamic table using jquery
body: <p>I wrote the following code to load json file and convert it to table,I am getting error <code>roleList is not defined</code>.What I did wrong?
  <br>Is my code correct?
  <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>    $(document).ready(function(){
                  // var roleList;
            $.getJSON('a.json', function(data) {
             var roleList=data;
             // console.log(rolelist);
                empRoles();  
            });
      });
      function empRoles(){
    for(var i=0;i&lt;roleList.length;i++)
       {
       var table='&lt;tr id="row'+i+'"&gt;&lt;td&gt;'+roleList[i].sNo+'&lt;/td&gt;&lt;td class="roleName" id="name'+i+'"&gt;'+roleList[i].roleName+'&lt;/td&gt;&lt;td&gt;&lt;button class="btn edit btn-info" id="edit'+i+'"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;Edit&lt;/button&gt;&lt;button class="btn update btn-success" id="update'+i+'"&gt;&lt;i class="fa fa-floppy-o"&gt;&lt;/i&gt;Update&lt;/button&gt;&lt;button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;Delete&lt;/button&gt;&lt;/td&gt;&lt;tr&gt;';
       $('#roleListTable').append(table)
       }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is a.json file:</p>
  
  <pre><code>var data=[{
  "sNo"     :"1",
  "roleName":"Designer"
  },
  {
  "sNo"     :"2",
  "roleName":"Developer"
  },
  {
  "sNo"     :"3",
  "roleName":"HR Dept"
  },
  {
  "sNo"     :"4",
  "roleName":"Project Manager"
  }
  ];
  </code></pre>
  
  <p>Html part:</p>
  
  <pre><code>                &lt;table class="table"&gt;
                  &lt;thead class="roleListTableHead"&gt;
                  &lt;tr&gt;
                  &lt;td&gt;S.NO&lt;/td&gt;
                  &lt;td&gt;ROLE NAME&lt;/td&gt;
                  &lt;td&gt;ACTION&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id="roleListTable"&gt;
                  &lt;/tbody&gt;            
                  &lt;/table&gt;
  </code></pre>
  
  <p>Can anyone give idea?</p>