CODEWITHSUNDEEP
javascripthtmlarraysjson
PPH
PPH

Reputation: 31

How to load my json data into a html table and make the rows as radio buttons using pure Javascript?

I have a json response:

var jsondata = dojo.fromJson(response);

I have a string

var jsonString = jsondata.items;

jsonString is the JSON file

jsonString="[
                {macAddress:'aa:bb:Cc',domainName:'NMS',Priority:'first'},
                {macAddress:'ea:fb:Ca',domainName:'Network',Priority:'third'}, 
                {macAddress:'ca:bb:Ca',domainName:'Mesh',Priority:'second'}
            ]";

Now I want to access the first object {macAddress:'aa:bb:Cc',domainName:'NMS',Priority:'first'} by jsonString[0]. This is not working. This displays "[", which is the first element and not the first object.

I have also tried 

jsondata.items[0];
jsondata[Object.keys(jsondata)[0]];
jsondata[1];

Everything says "Undefined".

Could someone please help?I need to extract this data and put it in a table with rows as radio buttons

Upvotes: 1

Views: 504

Answers (2)

Juan Parra
Juan Parra

Reputation: 154

var jsonString = '[{"macAddress": "aa:bb:Cc","domainName": "NMS","Priority": "first"},{"macAddress": "ea:fb:Ca","domainName": "Network","Priority": "third"},{"macAddress": "ca:bb:Ca","domainName": "Mesh","Priority": "second"}]';

var jsonObject = JSON.parse(jsonString);

//build head
var head = '<tr>';

for(key in jsonObject[0]){
    head +='<th>&nbsp;</th><th>'+key+'</th>';
}
head +='</tr>';

//build rows

var rows = jsonObject.map(function(element){
            var row = '<tr>';
            for( key in element){
                row += '<td>&nbsp;</td><td><input type="radio" name="'+key+'" /> '+ element[key] +'</td>';  		
            }
            row += '</tr>';
            return row;
         });

//adding to table
var tbl_head = document.getElementById('tbl').getElementsByTagName('thead')[0];
var tbl_body = document.getElementById('tbl').getElementsByTagName('tbody')[0];

tbl_head.innerHTML = head;
tbl_body.innerHTML = rows.join('');
<!doctype html>
<html>
	<head>
		<title>Stackoverflow</title>
	</head>
	<body>
		<div class="container">
			<table id="tbl">
				<thead></thead>
				<tbody></tbody>
			</table>
		</div>    		    		
	</body>
</html>

Upvotes: 1

Debasish Pothal
Debasish Pothal

Reputation: 71

I think there is an error in your json string, try to validate json using jsonlint.com

Please find the working code below :

$(document).ready(function(){
    var jsonString = '[{"macAddress": "aa:bb:Cc","domainName": "NMS","Priority": "first"},{"macAddress": "ea:fb:Ca","domainName": "Network","Priority": "third"},{"macAddress": "ca:bb:Ca","domainName": "Mesh","Priority": "second"}]';	

    var row = '';    	
	
    $.each($.parseJSON(jsonString), function(index, value){
        row += '<tr><td>&nbsp;</td><td><input type="radio" name="test" /> '+ value.macAddress +'</td></tr>';
		});
    $('#tbl tbody').html(row);
});
 <!doctype html>
<html>
<head>
	<title>Stackoverflow</title>
</head>
<body>
	<div class="container">
		<table id="tbl">
			<thead>
				<tr>
					<th>&nbsp;</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>

Upvotes: 1

Related Questions