Question

我有一个json文件，当我点击按钮时，它只显示最后一个json数据（ Ipsum％40 ）。但我想解析这个问题;它必须在#choice1 div和#choice2 div中的$("#getdata-button").click(function() { $.getJSON('json_data.txt', function(read_data) { $.each(read_data.result, function(i, data) { $("#choice1").html(data.option + data.percent); $("#choice2").html(data.option + data.percent); }); }); }); <button id="getdata-button">hello</button> <div id="choice1"></div><br> <div id="choice2"></div>和“Ipsum”中显示“Lorem”。我怎样才能做到这一点？以下是我的代码;

JS：

{
  "result": [{
    "option": "Lorem",
    "percent": " %50"
  }, {
    "option": "Ipsum",
    "percent": " %32"
  }]
}

HTML：

{{1}}

JSON：

{{1}}

Answer 1

对于Object中的每个Item，将choise1和choise2设置为该值。因此，第二次调用$ .each函数时，它会覆盖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);
  });
});

现在应该可行了。如果没有，请告诉我。随意以任何形式使用此代码。

问候，

最高

Answer 2

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

对您来说可能是最简单的解决方案。如果你有超过2个条目，你可能想用“for”迭代它，如下所示：

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

Answer 3

首先，不要将文件另存为json_data.txt，而是将其另存为json_data.json。更新您的$.getJSON网址以与之匹配。

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

$("#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)
      });
  });
});

Answer 4

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

<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添加内容，它会在每次迭代时重新启动，这很慢。

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

4 个答案: