@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>how to pass json array in ajax jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script>
$(document).ready(function () {
$("#btnSend").click(function () {
var Stock = [{ stockId: 1, StockName: 'Rel', StockPrice: 1520 }
, { stockId: 2, StockName: 'Relaxo', StockPrice: 520 }
, { stockId: 3, StockName: 'SBI', StockPrice: 120 }];
$.ajax({
type: "POST",
url: '@Url.Action("GetJsonData", "Stock")',
dataType: "json",
data: JSON.stringify({ Stock }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
let output = data.map(i => "<tr><td>" + i.stockId + "</td><td>" + i.StockName + "</td><td>" + i.StockPrice + "</td></tr>");
$("#output").html(output);
$("#tbstock").show();
}
});
});
});
</script>
</head>
<body>
<p>
<table style="display:none" id="tbstock" class="table table-bordered">
<tr class="table-head">
<th>Stock Id</th>
<th> Stock Name</th>
<th> Stock Price</th>
</tr>
<tbody id="output">
</table>
</p>
<br />
<input type="button" id="btnSend" name="Send Array" value="Send Array" />
</body>
</html>