How to pass JSON array in ajax JQuery with example

July 02 2020 by Admin 13709 Views

In this article, we will explain how to pass a JSON array in ajax JQuery with an example and sample code.

In this article, we will explain how to pass a JSON array in ajax JQuery with an example and sample code. In this example, we are using the Jquery button click event. on the click, we using Ajax Post Method to send (pass) array data.

Step -1

Open Visual Studio. Click on the file in the menu and select new Project .

How to Pass JSON array in ajax Jquery example

Step -2

Select new project type.

Index.cshtml

We have provided razor view html below. We are binding the reposne in html table.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>how to pass json array in ajax jquery</title>

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

<th>Stock Id</th>

<th> Stock Name</th>

<th> Stock Price</th>

</tr>

</table>

</p>

<br />

</body>

</html>

Models

public class Stockmodel

{

public int stockId { get; set; }

public string StockName { get; set; }

public decimal StockPrice { get; set; }

}

StockController

public class StockController : Controller

{

// GET: Stock

public ActionResult Index()

{

return View();

}

public JsonResult GetJsonData(List<Stockmodel> Stock)

{

return Json(Stock);

}

Screenshot

Home > JQuery > How to pass JSON array in ajax JQuery with example