Javascript 我有一个json文件，当我点击按钮时

我有一个json文件，当我单击按钮时，它只显示最后一个json dataIpsum%40。但我想这样分析；它必须在choice1分区中显示Lorem，在choice2分区中显示Ipsum。我该怎么做？下面是我的代码

JS:

HTML:

---

对于对象中的每个项目，都可以将choise1和choise2设置为该值。因此，第二次调用$。每个函数时，它都会用该值覆盖choise1和choise2。 您应该执行以下操作：

$("#getdata-button").click(function() {
  $.getJSON('json_data.txt', function(read_data) {
    $("choise1").val(read_data[0].option + read_data[0].percent);
    $("choise2").val(read_data[1].option + read_data[1].percent);
  });
});

现在应该可以了。如果没有，请告诉我。可以出于任何目的以任何形式使用此代码

您好

马克斯

可能是最简单的解决方案。 如果您有两个以上的条目，您可能希望使用如下方式对其进行迭代：

for(var i = 0; i < read_data.result.length; i++) {
    //Access the json like this:
    //read_data_result[i]
}

<button id="getdata-button">hello</button>
<div id="choices"></div>

<script>
$("#getdata-button").click(function() {
  $.getJSON('data.txt', function(read_data) {
    var choices = '';
    $.each(read_data.result, function(i, data) {
      choices += '<div id="choise">' + data.option + data.percent + '</div><br>';
    });
    $("#choices").html( choices );
  });
});
</script>

---

首先，不要将文件保存为json_data.txt，而是将其保存为json_data.json。更新$.getJSON URL以匹配它

其次，在这种情况下，您可能不需要每个都使用$。这将解决您的问题：

$("#getdata-button").click(function() {
  $.getJSON('json_data.txt', function(read_data) {
      $('#choise1').html(read_data.result[0].option + read_data[0].percent);
      $('#choise2').html(read_data.result[1].option + read_data[1].percent);
  });
});

如果您确实需要使用$each，那么您可以这样做：

$("#getdata-button").click(function() {
  $.getJSON('json_data.txt', function(read_data) {
      $.each(read_data.result, function(i, data) {
          $('#choise' + (i + 1)).html(data.option + data.percent)
      });
  });
});

---

更好的解决方案是这样做：

for(var i = 0; i < read_data.result.length; i++) {
    //Access the json like this:
    //read_data_result[i]
}

<button id="getdata-button">hello</button>
<div id="choices"></div>

<script>
$("#getdata-button").click(function() {
  $.getJSON('data.txt', function(read_data) {
    var choices = '';
    $.each(read_data.result, function(i, data) {
      choices += '<div id="choise">' + data.option + data.percent + '</div><br>';
    });
    $("#choices").html( choices );
  });
});
</script>

---

因此，首先为内存中的所有选择生成HTML，然后将其添加到DOM中。不要在循环中向DOM中添加内容，每次迭代都会触发回流，这会很慢。

您应该尝试正确缩进代码，以便更易于阅读。你看过标签的描述了吗？不要使用这个标签！这个标签太宽泛了，不能真正告诉我们问题是关于什么的。在你的情况下，你不应该做每一件事，因为第二次迭代将取代第一次迭代的结果。使用数组索引器数据[0]。改为使用选项等。它显示%40！以下是我的JSON:…%50%32:关于第二个代码段：最好为内存中的选项生成所有HTML，并在循环后将其添加到DOM中。否则，每次迭代都会触发一个高性能的回流，这很公平。通常我会在DOM之外创建一个新元素，进行任何需要的更改，然后替换DOM内部的目标元素。只是想向OP演示这个概念，而不是深入了解jQuery性能的细节：谢谢您的回答，但它没有起作用。当我点击按钮时，什么也没发生。

$("#getdata-button").click(function() {
  $.getJSON('json_data.txt', function(read_data) {
      $.each(read_data.result, function(i, data) {
          $('#choise' + (i + 1)).html(data.option + data.percent)
      });
  });
});

<button id="getdata-button">hello</button>
<div id="choices"></div>

<script>
$("#getdata-button").click(function() {
  $.getJSON('data.txt', function(read_data) {
    var choices = '';
    $.each(read_data.result, function(i, data) {
      choices += '<div id="choise">' + data.option + data.percent + '</div><br>';
    });
    $("#choices").html( choices );
  });
});
</script>