使用jquery

Question

我编写了以下代码来加载json文件并将其转换为表格，我收到错误roleList is not defined。我做错了什么？
我的代码是否正确？

＆＃13;

＆＃13;

    $(document).ready(function(){
                // var roleList;
    		    $.getJSON('a.json', function(data) {
    		    	var roleList=data;
    		    	// console.log(rolelist);
    		        empRoles();  
    		    });
    });
    function empRoles(){
		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)
	    }
}

＆＃13;

＆＃13;

＆＃13;

这是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作为参数传递给empRoles()函数。

＆＃13;

＆＃13;

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)
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您需要从var data=文件中删除a.json，JSON文件的数据结构不正确。见工作Plunker

Answer 2

使用each()循环，将数据作为参数传递给函数

     $.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)
       });
      }

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;