Использование getJSON для вызова данных из внешнего файла .JSON, но не работает - PullRequest
Новая
       22

Использование getJSON для вызова данных из внешнего файла .JSON, но не работает

0 голосов
/ 29 марта 2019

Я пытаюсь сохранить данные JSON для заполнения таблицы сравнения в отдельном файле «.json» и вызвать данные с помощью команды «$ .getJSON». Однако по какой-то причине это не работает, хотя кажется, что код в порядке.

Я просмотрел несколько видео и попробовал разные подходы. Если изначально консоль показывала определенные ошибки, теперь она не показывает никаких ошибок. Нажатие кнопки «Отправить» возвращает мне одну пустую ячейку вместо таблицы. Я также проверил json на наличие ошибок форматирования, их нет. Кажется, ошибка в команде 'getJSON', хотя я не совсем понимаю, в чем может быть ошибка.

Файл .json находится в той же папке, что и файл .html.

JS Fiddle для всего кода для вашей справки (без файла json): https://jsfiddle.net/mithunu/5ws61bgh/1/

Код JSON: 

{
  "Samsung": {
    "Parameter1": "<div id=\"rating1\"> 40 </div>",
    "Parameter2": "<div id=\"rating2\"> 50 </div>",
    "Parameter3": "<div id=\"rating3\"> 30 </div>"
  },
  "Mi": {
    "Parameter1": "<div id=\"rating1\"> 40 </div>",
    "Parameter2": "<div id=\"rating2\"> 50 </div>",
    "Parameter3": "<div id=\"rating3\"> 30 </div>"
  },
  "Apple": {
    "Parameter1": "<div id=\"rating1\"> 50 </div>",
    "Parameter2": "<div id=\"rating2\"> 30 </div>",
    "Parameter3": "<div id=\"rating3\"> 40 </div>"
  }  
}

Код jQuery: 

jQuery(document).ready(function($) {

jQuery('#btnSubmit').click(function() {
 var data = [];  
 jQuery("#selection").find(':selected').each(function(e) {
   var this_input = jQuery(this);
   if (this_input.is(':selected')) {
     data.push(this_input.val());
   }
 });
 $('#divResult').empty().append(PrintTable(data));
});

function PrintTable(data) {
  var html = '<table class="compTable"><tr><td>';
  if (data && data.length) {
    html += '</td>';
    jQuery.getJSON("mobileJSON.json", function(data){
    jQuery.each(data, function(k, v) {
      html += '<td id="myHeader" class="header2">' + v + '</td>';
    });
    html += '</tr>';
    jQuery.each([data[0]], function(k, v) {
      html += '<tr><td>' + k + '</td>';
        jQuery.each(data, function(k2, v2) {
        html += '<td>' + [data[k2]][k] + '</td>';
      });
      html += '</tr>';
    });
  });
  } else { html += 'No results found</td></tr>'; }
  html += '</table>';
  return html;
}
});

Обратите внимание, код работает, если я разрешу массиву JSON находиться внутри самого кода jQuery.

Однако мне нужен jQuery для извлечения данных из внешнего файла, так как данных будет много и он будет тяжелым. Я также в конечном итоге хочу добавить его в файл function.php в Wordpress, и не рекомендуется хранить все данные в этом файле.

Пожалуйста, помогите.

...