如何将JSON数据从特定的URL保存到javascript数组中并通过它进行访问？ [英] How to save JSON data from a specific url into a javascript array and access through it?
本文介绍了如何将JSON数据从特定的URL保存到javascript数组中并通过它进行访问？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Json和Javascript的新手。
我想要做的是，当我点击加号（在数据表内）时，它应该将订单详细信息显示在动态生成的html表中，每个订单ID的标题，行和单元格。我试图将来自url的JSON数据存储到数组中，然后循环遍历它，然后将每个Order ID对应的数据显示到html表中。所以这是我的视图和控制器方法：
I am new to Json and Javascript .
What i am trying to do is , when i click the plus sign (inside the datatable) , it should display the order details into a dynamically generated html table , with headers , rows and cells , for every Order ID. I am trying to store the JSON data from url into an array and than loop through it , and than display them corresponding every Order ID into a html table . So this is my View and controller method :
<style>
td.details-control {
background: url('/Content/images/details_open.png') no-repeat center center;
width:40px;
height:5px;
cursor: pointer;
}
tr.details td.details-control {
background: url('/Content/images/details_close.png') no-repeat center center;
width:40px;
height:5px;
}
</style>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Order ID</th>
<th>Customer ID</th>
<th>ContactName</th>
<th>Employee ID</th>
<th>Order Date</th>
<th>Required Date</th>
<th>Ship Via</th>
<th>Freight</th>
<th>Ship name</th>
<th>Ship Address</th>
<th>Ship City</th>
<th>Ship Region</th>
<th>Ship Postal</th>
<th>Ship Country</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Order ID</th>
<th>Customer ID</th>
<th>ContactName</th>
<th>Employee ID</th>
<th>Order Date</th>
<th>Required Date</th>
<th>Ship Via</th>
<th>Freight</th>
<th>Ship name</th>
<th>Ship Address</th>
<th>Ship City</th>
<th>Ship Region</th>
<th>Ship Postal</th>
<th>Ship Country</th>
</tr>
</tfoot>
</table>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script>
function format(d) {
return '<table id = "entrydata" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<thead>' +
'<th>PRODUCT ID</th>' +
'<th>PRODUCT NAME</th>' +
'<th>UNIT PRICE</th>' +
'<th>QUANTITY</th>' +
'<th>DISCOUNT</th>' +
'</thead>' +
'<tbody>' +
'</tbody>' +
'</table>';
}
$(document).ready(function () {
var dt = $('#example').DataTable({
"ajax": {
"url": "/Test/GetData",
"type": "GET",
"dataSrc": "",
"method": "GET",
"dataType": "json",
" destroy": true
},
"columns":
[
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "OrderID" },
{ "data": "CustomerID" },
{ "data": "ContactName" },
{ "data": "EmployeeID", },
{ "data": "OrderDate" },
{ "data": "RequiredDate" },
{ "data": "ShipVia" },
{ "data": "Freight" },
{ "data": "ShipName" },
{ "data": "ShipAddress" },
{ "data": "ShipCity" },
{ "data": "ShipRegion" },
{ "data": "ShipPostalCode" },
{ "data": "ShipCountry" }
],
"order": [[1, 'asc']]
});
var detailRows = [];
$('#example tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass('details');
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td.details-control').trigger( 'click' );
} );
} );
} );
</script>
__________________
__________________
public JsonResult GetData()
{
try
{
using (db = new dbNorthwindEntities())
{
var myList = or.GetOrders(db);
return Json(myList, JsonRequestBehavior.AllowGet);
}
}
catch (Exception)
{
throw;
}
}
________________________________________________
这是POSTMAN在
________________________________________________
This is the JSON format returned from POSTMAN in
_ http://localhost:56656/Test/GetData _
[
{
"OrderID": 10248,
"CustomerID": "VINET",
"ContactName": "Paul Henriot",
"EmployeeID": 5,
"OrderDate": "/Date(836431200000)/",
"RequiredDate": "/Date(838850400000)/",
"ShippedDate": "/Date(837468000000)/",
"ShipVia": 3,
"Freight": 32.38,
"ShipName": "Vins et alcools Chevalier",
"ShipAddress": "59 rue de l'Abbaye",
"ShipCity": "Reims",
"ShipRegion": null,
"ShipPostalCode": "51100",
"ShipCountry": "France",
"ProductID": 11,
"ProductName": "Queso Cabrales",
"UnitPrice": 14,
"Quantity": 12,
"Discount": 0
},
{
"OrderID": 10248,
"CustomerID": "VINET",
"ContactName": "Paul Henriot",
"EmployeeID": 5,
"OrderDate": "/Date(836431200000)/",
"RequiredDate": "/Date(838850400000)/",
"ShippedDate": "/Date(837468000000)/",
"ShipVia": 3,
"Freight": 32.38,
"ShipName": "Vins et alcools Chevalier",
"ShipAddress": "59 rue de l'Abbaye",
"ShipCity": "Reims",
"ShipRegion": null,
"ShipPostalCode": "51100",
"ShipCountry": "France",
"ProductID": 42,
"ProductName": "Singaporean Hokkien Fried Mee",
"UnitPrice": 9.8,
"Quantity": 10,
"Discount": 0
},................................................
{
我的尝试：
我刚刚在上面解释过。
What I have tried:
I just explained above please.
推荐答案
（文件）.ready（function（ ）{
var dt =
(document).ready(function () { var dt =
（'＃example'）。DataTable（{
ajax：{
url：/ Test / GetData，
type：GET，
dataSrc：，
方法：GET，
dataType ：json，
destroy：true
}，
columns：
[
{
class：details-control，
orderable：false，
data：null，
defaultContent：
}，
{data：OrderID}，
{data：CustomerID}，
{data：ContactName}，
{data：EmployeeID，}，
{data：OrderDate}，
{data：RequiredDate }，
{data：ShipVia}，
{data：运费}，
{data：ShipName}，
{ data：ShipAddress}，
{data：ShipCity}，
{data：ShipRegion}，
{data：ShipPostalCode} ，
{data：ShipCountry}
]，
order：[[1，'asc']]
} ）;
var detailRows = [];
('#example').DataTable({ "ajax": { "url": "/Test/GetData", "type": "GET", "dataSrc": "", "method": "GET", "dataType": "json", " destroy": true }, "columns": [ { "class": "details-control", "orderable": false, "data": null, "defaultContent": "" }, { "data": "OrderID" }, { "data": "CustomerID" }, { "data": "ContactName" }, { "data": "EmployeeID", }, { "data": "OrderDate" }, { "data": "RequiredDate" }, { "data": "ShipVia" }, { "data": "Freight" }, { "data": "ShipName" }, { "data": "ShipAddress" }, { "data": "ShipCity" }, { "data": "ShipRegion" }, { "data": "ShipPostalCode" }, { "data": "ShipCountry" } ], "order": [[1, 'asc']] }); var detailRows = [];
（'＃example tbody'）。on（'click'，'tr td.details-control'，function（ ）{
var tr =
('#example tbody').on( 'click', 'tr td.details-control', function () { var tr =
这篇关于如何将JSON数据从特定的URL保存到javascript数组中并通过它进行访问？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
