загрузка данных json в таблицу с помощью jquery

#jquery

Вопрос:

СКРИПТ JQUERY

 {
  $(document).ready(function(){
$.getJSON("array.json",function(data){
    var employee_data='';
    $.each(data,function(key,value){
   employee_data  ='<tr>';
   employee_data  ='<td>' value.DIVNFULLNAME '</td>';
   employee_data  ='<td>' value.FUNCDESGDES '</td>';
   employee_data  ='<td>' value.INDENTDATE '</td>';
     employee_data  ='<tr>';
    });
  $('#data-table').append(employee_data);

});

});

}

HTML

{

      <div id="myapp" class="container">
           <h1 align="center">Show JSON Data in Jquery Datatables</h1><br />
            <h3 align="center">Employee Database</h3><br />
            <table id="data-table" class="table table-bordered">
                 <thead>
                      <tr>
                           <th>DIVNFULLNAME </th>
                           <th>FUNCDESGDES</th>
                           <th>INDENTDATE</th>
                      </tr>
                 </thead>
            </table>
       </div>

}

ARRAY.JSON

{

    {"data":[{
          "DIVNFULLNAME":"DIRECTORATE OF INFORMATION SYSTEMS amp; MANAGEMENT",
          "FUNCDESGDES":"PROGRAMME MANAGER",
          "INDENTDATE":"2020-06-10 00:00:00.0"
          }

]
}

}

я пытаюсь загрузить данные в таблицу с помощью jQuery, но когда я пытаюсь загрузить данные в таблицу, но они отображаются как неопределенные. я новичок в jQuery, пожалуйста, предложите.

1. я устал от этого, но также он не показывает данные.

2. попробуйте => data.data в вашем $.each — у вас есть массив объектов. вам нужно получить доступ через dot нотацию и выполнить цикл для этого, чтобы получить значение object .

Ответ №1:

Проблема в том, что ваш результат JSON является объектом, а не массивом.

У вас есть два варианта. Либо вы меняете результат на этот:

 [
    {
      "DIVNFULLNAME":"DIRECTORATE OF INFORMATION SYSTEMS amp; MANAGEMENT",
      "FUNCDESGDES":"PROGRAMME MANAGER",
      "INDENTDATE":"2020-06-10 00:00:00.0"
    }
    // ... other objects
]

Или, когда вы обрабатываете ответ, используйте data свойство для результирующего объекта:

 $(document).ready(function(){
  $.getJSON("array.json",function(RESPONSE){
    var employee_data='';
    $.each(RESPONSE.data,function(key,value){
      employee_data  ='<tr>';
      employee_data  ='<td>' value.DIVNFULLNAME '</td>';
      employee_data  ='<td>' value.FUNCDESGDES '</td>';
      employee_data  ='<td>' value.INDENTDATE '</td>';
      employee_data  ='<tr>';
    });
    $('#data-table').append(employee_data);
  });
});

Я написал RESPONSE с большой буквы, чтобы подчеркнуть, где ошибка. data Параметр из функции ответа ajax — это объект, который содержит другое data свойство, в котором у вас есть свой массив.

1. извините, мне не хватало этой логики, большое вам спасибо, у меня это сработало.

2. когда я использую сервлет, могу ли я получать данные из сервлета, используя эту логику

3. Привет @jyothikachapur. Рад помочь. Не могли бы вы пометить ответ как принятый? Спасибо.

4. я пометил как принятый, спасибо за вашу помощь, пожалуйста, не могли бы вы помочь мне так же, как для сервлета

5. @jyothikachapur просто поправка здесь. Вы отметили другой ответ как принятый — я думаю, вы должны были выбрать этот в соответствии с вашим комментарием

Ответ №2:

Вот как я бы это сделал. Я бы создал переменную и использовал цикл для создания данных. Затем в конце добавьте его в тело таблицы.

 $(document).ready(function() {


var a = {
  "data": [
  {
    "DIVNFULLNAME": "DIRECTORATE OF INFORMATION SYSTEMS amp; MANAGEMENT",
    "FUNCDESGDES": "PROGRAMME MANAGER",
    "INDENTDATE": "2020-06-10 00:00:00.0"
  },
  {
    "DIVNFULLNAME": "TESTER 1",
    "FUNCDESGDES": "TESTER 2",
    "INDENTDATE": "TESTER 3"
  }
  ]
}
 
  var employee_data = '';
  
  for(i in a.data) {
      employee_data  = '<tr>';
      employee_data  = '<td>'   a.data[i].DIVNFULLNAME   '</td>';
      employee_data  = '<td>'   a.data[i].FUNCDESGDES   '</td>';
      employee_data  = '<td>'   a.data[i].INDENTDATE   '</td>';
      employee_data  = '</tr>';
  }
  
  $('#data-table tbody').append(employee_data);
  
});

 .table-bordered, th, td {
  border-collapse: collapse;
  border: 1px solid black;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myapp" class="container">
  <h1 align="center">Show JSON Data in Jquery Datatables</h1><br />
  <h3 align="center">Employee Database</h3><br />
  <table id="data-table" class="table table-bordered">
    <thead>
      <tr>
        <th>DIVNFULLNAME</th>
        <th>FUNCDESGDES</th>
        <th>INDENTDATE</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>