我有一個JSON文件，當我點擊按鈕

我有一個JSON文件，當我點擊按鈕時，它只顯示最後的JSON數據（Ipsum％40）。但我想要這樣解析;它必須顯示「Lorem」 in #choice1div and 「Ipsum」 in #choice2div。我怎樣才能做到這一點？以下是我的代碼。我有一個JSON文件，當我點擊按鈕

JS：

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

HTML：

<button id="getdata-button">hello</button> 
<div id="choice1"></div><br> 
<div id="choice2"></div>

JSON：

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

來源

2015-02-08 escada

您應該嘗試正確縮進代碼，以便更易於閱讀。你讀過[tag：data]標籤的描述了嗎？（'不要使用這個標籤！這個標籤是絕望的廣泛，並沒有真正告訴我們這個問題是關於什麼的） – 2015-02-08 21:34:45

你不應該在你的情況下做'each'，因爲第二次迭代將取代第一次迭代的結果。使用數組索引器（'data [0] .option'等）。 – Tommi 2015-02-08 21:36:45

*「它顯示'％40'！這是我的JSON：...％50％32「* :) – 2015-02-08 21:37:05

首先，而不是保存文件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) 
     }); 
    }); 
});

來源

2015-02-08 21:44:44 Eclecticist

關於你的第二個代碼片段：最好爲內存中的選擇生成所有的HTML，並在循環將它添加到DOM之後，否則你會在每次迭代時觸發一次迴流不正常 – 2015-02-08 21:56:13

一般來說，我會在DOM之外創建一個新元素，進行任何需要的更改，然後替換DOM中的目標元素，只是試圖向OP演示概念，而不是進入具體的jQuery性能:) – Eclecticist 2015-02-08 22:03:38

它的工作感謝你 – escada 2015-02-08 22:10:10

對於對象中的所有項目，你將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); 
    }); 
});

那現在應該工作。如果沒有，請告訴我。隨時在任何形式中使用此代碼用於任何目的。

問候，

最大

來源

2015-02-08 21:43:23

謝謝你的回答，但它不起作用。當我點擊這個按鈕時，什麼也沒有。 – escada 2015-02-08 21:59:37

$("#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(var i = 0; i < read_data.result.length; i++) { 
    //Access the json like this: 
    //read_data_result[i] 
}

來源

2015-02-08 21:44:25

read_data.result [2] .percent => read_data.result [1] .percent – Tommi 2015-02-08 21:46:48

當然，修正了謝謝 – 2015-02-09 09:57:57

一個更好的解決辦法是做這樣的事情：

<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中，它會在每次迭代都很慢時觸發重排。

來源

2015-02-08 21:53:49

我有一個JSON文件，當我點擊按鈕

回答

相關問題