jqueryを使用してjsonファイルを動的表に変換する

Question

jsonファイルをロードしてテーブルに変換する次のコードを書きましたが、エラーが発生していますroleList is not defined。
私のコードは正しいですか？

$(document).ready(function(){ 
 
       // var roleList; 
 
    \t \t  $.getJSON('a.json', function(data) { 
 
    \t \t  \t var roleList=data; 
 
    \t \t  \t // console.log(rolelist); 
 
    \t \t   empRoles(); 
 
    \t \t  }); 
 
    }); 
 
    function empRoles(){ 
 
\t \t for(var i=0;i<roleList.length;i++) 
 
\t  { 
 
\t  var table='<tr id="row'+i+'"><td>'+roleList[i].sNo+'</td><td class="roleName" id="name'+i+'">'+roleList[i].roleName+'</td><td><button class="btn edit btn-info" id="edit'+i+'"><i class="fa fa-pencil"></i>Edit</button><button class="btn update btn-success" id="update'+i+'"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>'; 
 
\t  \t $('#roleListTable').append(table) 
 
\t  } 
 
}

これはa.jsonファイルです：

var data=[{ 
"sNo"  :"1", 
"roleName":"Designer" 
}, 
{ 
"sNo"  :"2", 
"roleName":"Developer" 
}, 
{ 
"sNo"  :"3", 
"roleName":"HR Dept" 
}, 
{ 
"sNo"  :"4", 
"roleName":"Project Manager" 
} 
]; 

HTML部分：

   <table class="table"> 
       <thead class="roleListTableHead"> 
       <tr> 
       <td>S.NO</td> 
       <td>ROLE NAME</td> 
       <td>ACTION</td> 
       </tr> 
       </thead> 
       <tbody id="roleListTable"> 
       </tbody>    
       </table> 

は、誰もがアイデアを与えることはできますか？

Answer 1

の引数としてroleListを渡します。

var roleList = [{ 
 
    "sNo": "1", 
 
    "roleName": "Designer" 
 
    }, 
 
    { 
 
    "sNo": "2", 
 
    "roleName": "Developer" 
 
    }, 
 
    { 
 
    "sNo": "3", 
 
    "roleName": "HR Dept" 
 
    }, 
 
    { 
 
    "sNo": "4", 
 
    "roleName": "Project Manager" 
 
    } 
 
]; 
 

 
empRoles(roleList); 
 

 
function empRoles(roleList) { 
 
    for (var i = 0; i < roleList.length; i++) { 
 
    var table = '<tr id="row' + i + '"><td>' + roleList[i].sNo + '</td><td class="roleName" id="name' + i + '">' + roleList[i].roleName + '</td><td><button class="btn edit btn-info" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button class="btn update btn-success" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>'; 
 
    $('#roleListTable').append(table) 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <thead class="roleListTableHead"> 
 
    <tr> 
 
     <td>S.NO</td> 
 
     <td>ROLE NAME</td> 
 
     <td>ACTION</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="roleListTable"> 
 
    </tbody> 
 
</table>

---

あなたはa.jsonファイル、正しくないJSONファイルのデータ構造からvar data=を削除する必要があります。 //api.jquery：Plunker

Answer 2

が

 $.getJSON('a.json', function(data) { 
     empRoles(data); 
    }); 
    function empRoles(data) { 
     $.each(data,function(i,roleList) { 
     var table = '<tr id="row' + i + '"><td>' + roleList.sNo + '</td><td class="roleName" id="name' + i + '">' + roleList.roleName + '</td><td><button class="btn edit btn-info" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button class="btn update btn-success" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>'; 
     $('#roleListTable').append(table) 
     }); 
     } 

var data = [{ 
 
    "sNo": "1", 
 
    "roleName": "Designer" 
 
    }, 
 
    { 
 
    "sNo": "2", 
 
    "roleName": "Developer" 
 
    }, 
 
    { 
 
    "sNo": "3", 
 
    "roleName": "HR Dept" 
 
    }, 
 
    { 
 
    "sNo": "4", 
 
    "roleName": "Project Manager" 
 
    } 
 
]; 
 

 
function empRoles(data) { 
 
    $.each(data,function(i,roleList) { 
 
    var table = '<tr id="row' + i + '"><td>' + roleList.sNo + '</td><td class="roleName" id="name' + i + '">' + roleList.roleName + '</td><td><button class="btn edit btn-info" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button class="btn update btn-success" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>'; 
 
    $('#roleListTable').append(table) 
 
    }); 
 
} 
 

 
empRoles(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="roleListTable"></div>