Как сохранить данные JSON из определенного url-адреса в массив javascript и получить доступ через него?
Я новичок в Json и Javascript .
То , что я пытаюсь сделать , это когда я нажимаю знак плюс (внутри datatable), он должен отображать детали заказа в динамически генерируемую html-таблицу с заголовками , строками и ячейками для каждого идентификатора заказа. Я пытаюсь хранить данные JSON из url-адреса в массиве, а затем перебирать их, а затем отображать их, соответствующие каждому идентификатору заказа, в html-таблице . Итак, это мой метод представления и контроллера :
<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; } }
________________________________________________
Это формат JSON, возвращенный почтальоном в
_ 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 },................................................ {
Что я уже пробовал:
Я только что объяснил выше, пожалуйста.