转换JSON文件来使用jQuery

动态表，我写了下面的代码加载JSON文件并将其转换为表，我得到错误roleList is not defined。什么我做错了？
我的代码是否正确？转换JSON文件来使用jQuery

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

谁能给想法？

来源

2017-02-17 user7397787

试图['parseJSON'（HTTP：//api.jquery .COM/jquery.parsejson /）？ –

@Vishal kumar不，我没试过。 – user7397787

通roleList作为参数empRoles()功能。

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=。见工作Plunker

来源

2017-02-17 08:54:59 Satpal

@ user7397787，其他代码 – Satpal

中没有任何错误显示'未能加载响应数据'。 – user7397787

@ user7397787，你是否收到数据？检查'的console.log（RoleList的）' – Satpal

使用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) 
     }); 
     }

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>

来源

2017-02-17 09:00:05 madalinivascu

我想加载单独的JSON文件。 – user7397787

你可以做到这一点 – madalinivascu

转换JSON文件来使用jQuery

回答

相关问题