JSFiddle - React, Tailwind, and code Playground

by dhizzybusy

HTML

<html>
<head>
	<title>
		JSON Code
	</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"><script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="table-responsive">
			<h1>JSON Data</h1>
			<br/>
			

			<table class="table tab le-bordered table-striped" id="wines_table">
  
      
			</table>
<div id="demo">

</div>
			</div>
			</div>
			</body>
			</html>

JavaScript

var wines = '{"wines": ['+'{"Wine":"Riesling","Origin":"Germany","Taste": "Fruity", "Pairing": "Chicken, Pork, Duck"},'+
			'{"Wine": "Pinot Gris","Origin": "France","Taste": "Fruity","Pairing": "Salad, Mild and Light Cheese"},'+
			'{"Wine": "Sauvignon Blac","Origin": "France","Taste": "Fruity","Pairing": "Fish, Chicken, Veal"},'+
			'{"Wine": "Chardonnay","Origin": "France",	"Taste": "Fruity","Pairing": "Lobster, Crab, Shrimp"} ]}';
      
      
obj = JSON.parse(text);
var apple="";
var table="<tr><th>Wine</th><th>Origin</th><th>Taste</th><th>Pairing</th><tr>";
for (var i=0; i< obj.wines.length;i++){
var tr="<tr>";
tr +="<td>"+obj.wines[i].Wine+"</td>";
tr+="<td>"+obj.wines[i].Origin+"</td>";
tr+="<td>"+obj.wines[i].Taste+"</td>";
tr+="<td>"+obj.wines[i].Pairing+"</td>";
tr+="</tr>";
table+=tr;

}


document.getElementById("wines_table").innerHTML =table;