Блог

Главная - Вопросы по программированию - Как выполнить цикл по нескольким массивам json и отобразить результат

Как выполнить цикл по нескольким массивам json и отобразить результат

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

Я выполняю цикл по результату JSON, но в моем ответе есть несколько массивов.

В строке ниже я хочу отобразить только ответ killdata

 trHTML  = '<tr class="gradeA"><td>'   value.killdata.AcctNo   '</td></tr>';

В строке ниже я хочу отобразить только ответ raildata

  trRailHTML  = '<tr class="gradeA"><td>'   value.raildata.kill_date   '</td></tr>';

Пожалуйста, подскажите, как отобразить два массива данных в двух разных таблицах.

Ниже приведен мой ответ.

 {"raildata":[{"id":15,"kill_date":"2019-03-27T00:00:00 00:00","rail_no":1,"scale_no":10,"created":"2019-03-26T07:35:01 00:00","modified":"2019-03-26T07:35:01 00:00","is_deleted":0}],"killdata":[{"id":59,"acct_id":1883,"KillDate":"2019-03-27T00:00:00 00:00","AcctNo":"UP1011","account_drpdown":"112 | Archbold Elevator (1011) | Misc 1011 | None | UP1011 | OH","BarnHogs":22,"LiveWt":22,"InvAmt":"1","Condemned":1,"Hauling":"1","PrintEvery":null,"Adjustment":11,"BegNo":null,"EndNo":null,"GroupedAcct":"UP","GroupRecId":"138","GroupAcctDesc":"Archbold Elevator (1011); Misc 1011- None","RecCreationTime":"2019-03-25T10:41:14 00:00","MPRState":"OH","Ownership":"ROUTH","NotRouthCompany":null,"Country":"US","CalculationPurchaseType":null,"CalculationCarcassBasePrice":null,"CalculationLiveBasePrice":null,"created":"2019-03-25T10:41:14 00:00","is_deleted":0},{"id":102,"acct_id":1883,"KillDate":"2019-03-27T00:00:00 00:00","AcctNo":"UP1011","account_drpdown":"3 | Black, Bryan | PGI | None | UP1011 | OH","BarnHogs":11,"LiveWt":0,"InvAmt":"","Condemned":0,"Hauling":"","PrintEvery":null,"Adjustment":null,"BegNo":null,"EndNo":null,"GroupedAcct":"UP","GroupRecId":"19","GroupAcctDesc":"Black, Bryan; PGI- None","RecCreationTime":"2019-03-26T08:09:51 00:00","MPRState":"OH","Ownership":"ROUTH","NotRouthCompany":null,"Country":null,"CalculationPurchaseType":null,"CalculationCarcassBasePrice":null,"CalculationLiveBasePrice":null,"created":"2019-03-26T08:09:51 00:00","is_deleted":0}]}

Ниже приведен код, который работает, но я хочу отобразить результат killdata в одной таблице, а результат raildata во второй таблице..

 $(document).ready(function(){
$('.read').prop('disabled', true);
$('#client_treat_date').datepick({ 
    onClose: function(dates) { 
        $(this).blur();
        ajaxRequest = $.ajax({
        url: '<?= Router::url(['controller' => 'Killsheets', 'action' => 'listajaxkilldata']) ?>',
        type: 'POST',
        data: {killldate: $("#client_treat_date").val()},
        dataType: "json",
        success: function(response) {
            $('#ibox1').children('.ibox-content').toggleClass('sk-loading');  
                var trHTML = ''; 
                var trRailHTML = ''; 
                $(response).each(function (i,value) {                                
                    trHTML  = '<tr class="gradeA"><td>'   value.killdata.AcctNo   '</td></tr>';
                    trRailHTML  = '<tr class="gradeA"><td>'   value.raildata.kill_date   '</td></tr>';
                });                              
            $('#listKill').html(trHTML);
            $('#listRail').html(trRailHTML);
        }            

    }        
}); 
});

Комментарии:

1. Разве #listKill и #listRail не являются двумя разными таблицами?

2. Да, это две разные таблицы, но я не понимаю, как отобразить мой результат в двух разных таблицах из ответа.bcz у меня есть два массива raildata и killdata в моем ответе.

Ответ №1:

Проблема в том, что вы пытаетесь выполнить цикл по объекту response. Вместо этого вам понадобятся два отдельных цикла по массивам, содержащимся в killdata и raildata свойствах этого объекта.

Обратите внимание, что это можно сделать более кратко, используя map() для генерации массивов, которые содержат HTML-строки каждой строки, которые будут добавлены в таблицы. Попробуйте это:

 var trKillHTML = response.killdata.map(function(killdata) {
  return '<tr class="gradeA"><td>'   killdata.AcctNo   '</td></tr>';
});

var trRailHTML = response.raildata.map(function(raildata) {
  return '<tr class="gradeA"><td>'   raildata.kill_date   '</td></tr>';
});

$('#listKill').html(trKillHTML);
$('#listRail').html(trRailHTML);
  

 var response = {
  "raildata": [{
    "id": 15,
    "kill_date": "2019-03-27T00:00:00 00:00",
    "rail_no": 1,
    "scale_no": 10,
    "created": "2019-03-26T07:35:01 00:00",
    "modified": "2019-03-26T07:35:01 00:00",
    "is_deleted": 0
  }],
  "killdata": [{
    "id": 59,
    "acct_id": 1883,
    "KillDate": "2019-03-27T00:00:00 00:00",
    "AcctNo": "UP1011",
    "account_drpdown": "112 | Archbold Elevator (1011) | Misc 1011 | None | UP1011 | OH",
    "BarnHogs": 22,
    "LiveWt": 22,
    "InvAmt": "1",
    "Condemned": 1,
    "Hauling": "1",
    "PrintEvery": null,
    "Adjustment": 11,
    "BegNo": null,
    "EndNo": null,
    "GroupedAcct": "UP",
    "GroupRecId": "138",
    "GroupAcctDesc": "Archbold Elevator (1011); Misc 1011- None",
    "RecCreationTime": "2019-03-25T10:41:14 00:00",
    "MPRState": "OH",
    "Ownership": "ROUTH",
    "NotRouthCompany": null,
    "Country": "US",
    "CalculationPurchaseType": null,
    "CalculationCarcassBasePrice": null,
    "CalculationLiveBasePrice": null,
    "created": "2019-03-25T10:41:14 00:00",
    "is_deleted": 0
  }, {
    "id": 102,
    "acct_id": 1883,
    "KillDate": "2019-03-27T00:00:00 00:00",
    "AcctNo": "UP1011",
    "account_drpdown": "3 | Black, Bryan | PGI | None | UP1011 | OH",
    "BarnHogs": 11,
    "LiveWt": 0,
    "InvAmt": "",
    "Condemned": 0,
    "Hauling": "",
    "PrintEvery": null,
    "Adjustment": null,
    "BegNo": null,
    "EndNo": null,
    "GroupedAcct": "UP",
    "GroupRecId": "19",
    "GroupAcctDesc": "Black, Bryan; PGI- None",
    "RecCreationTime": "2019-03-26T08:09:51 00:00",
    "MPRState": "OH",
    "Ownership": "ROUTH",
    "NotRouthCompany": null,
    "Country": null,
    "CalculationPurchaseType": null,
    "CalculationCarcassBasePrice": null,
    "CalculationLiveBasePrice": null,
    "created": "2019-03-26T08:09:51 00:00",
    "is_deleted": 0
  }]
}

var trKillHTML = response.killdata.map(function(killdata) {
  return '<tr class="gradeA"><td>'   killdata.AcctNo   '</td></tr>';
});

var trRailHTML = response.raildata.map(function(raildata) {
  return '<tr class="gradeA"><td>'   raildata.kill_date   '</td></tr>';
});

$('#listKill').html(trKillHTML);
$('#listRail').html(trRailHTML);  
 table {
  border: 1px solid #CCC;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="listKill"></table>
<table id="listRail"></table>