Question

我试图将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从外部文件中提取数据，因为将会有很多数据，这会使文件变重。我最终还希望将其添加到Wordpress中的function.php文件中，而不建议将整个数据保留在此文件中。

请帮助。

使用getJSON调用来自外部.JSON文件的数据但不起作用

0 个答案: