ddgjgj Ответов: 1

Как сохранить данные 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
  },................................................
  {


Что я уже пробовал:

Я только что объяснил выше, пожалуйста.

1 Ответов

Рейтинг:
1

Bhuban _Shrestha

var jqxhr = $.getJSON( "url", function(jsonResult) {
  ParseJson(jsonResult);
})

function ParseJson(response)
{
 var html = "";
  for(var i=0; i<response.length; i++){
    html += "<tr>"
    html += "<td>" + response[i].ContactName + "</td>";
    ///other td
    html += "</tr>"
  }
$(document).find("#dynamicId").html(html);
} 


ddgjgj

Теперь с помощью этого кода, когда я нажимаю на каждую строку , он показывает все детали заказа базы данных, я имею в виду сотни строк .. Я пытаюсь что-то вроде этого (на основе идентификатора заказа), но не работает :

формат функции(d) {



var jqxhr = $. getJSON ("/Test/GetData", функция (jsonResult) {
ParseJson(jsonResult);
})

функция ParseJson(ответ) {
ВАР HTML-код = "";
for (var i = 0; i & lt; response.длина; i++)
{
for (var j = 0; i <= response[i].OrderID; j++)
{
формат HTML += ""
html + = "" + ответ[j].Кодтовара + "";
html + = "" + ответ[j].значение ProductName + "";
html + = "" + response[j]. UnitPrice + "";
html + = "" + ответ[j]. количество + "";
html + = "" + ответ[j].Скидка + "";
/// другие td
формат HTML += ""
}
}
$(документ).найти("#entrydata").HTML-страницы(в формате HTML);
}