Convert json file to dynamic table using jquery

Question

I wrote the following code to load json file and convert it to table,I am getting error roleList is not defined.What I did wrong?
Is my code correct?

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

This is a.json file:

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

Html part:

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

Can anyone give idea?

tried parseJSON?

Vishal Kumar Sahu
– Vishal Kumar Sahu

2017-02-17 09:00:04 +00:00
Commented Feb 17, 2017 at 9:00 — Vishal Kumar Sahu
– Vishal Kumar Sahu, Commented Feb 17, 2017 at 9:00
@Vishal kumar No I did't try.

user7397787
– user7397787

2017-02-17 09:05:04 +00:00
Commented Feb 17, 2017 at 9:05 — user7397787
– user7397787, Commented Feb 17, 2017 at 9:05

Satpal · Accepted Answer · 2017-02-17 10:15:32Z

3

Pass roleList as an argument to empRoles() function.

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>

You need to remove var data= from a.json file, the data structure for the JSON file not correct. See working Plunker

edited Feb 17, 2017 at 10:15

answered Feb 17, 2017 at 8:54

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Satpal Over a year ago

@user7397787, there nothing wrong in the other code

Satpal Over a year ago

@user7397787, Are you getting the data? check console.log(roleList)

user7397787 Over a year ago

please check this with above json file.

Satpal Over a year ago

@user7397787 You need to remove var data= from a.json file. see plnkr.co/edit/eyyJPK?p=preview

user7397787 Over a year ago

yah yah thanks.Now I am getting data but table only not displaying

madalinivascu · Accepted Answer · 2017-02-17 09:05:18Z

1

Use a each() loop, pass your data to the function as a argument

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

edited Feb 17, 2017 at 9:05

answered Feb 17, 2017 at 9:00

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

2 Comments

user7397787 Over a year ago

I want to load separate json file.

madalinivascu Over a year ago

you can do that

Collectives™ on Stack Overflow

Convert json file to dynamic table using jquery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related