JQueryは配列の次の項目を表示します

Question

displayItem関数を使用して配列jsonから次の項目を表示しようとしていますが、ボタンをクリックすると、フォームは最初の値（arrayResponse [0]）を再ロードします。代わりに次のアイテムを表示するために何をすべきですか？

$(document).ready(function() { 
    var firstElement; 
    var arrayResponse; 
    var index = 0; 

    var request = new XMLHttpRequest(); 

    // When the file has loaded, 
    request.onload = function() { 

    // parse the JSON text into an array of post objects. 
    arrayResponse = JSON.parse(request.responseText); 

    var firstelement = arrayResponse[0]; 

    $("#name").val(firstelement.name); 
    $("#author").val(firstelement.author); 
    $("#content").val(firstelement.content); 

    // Pass the posts array to the callback. 

    }; 
    request.open("GET", "http://127.0.0.1:8887/posts.json", true); 
    request.send(null); 


    $("#nextButton").bind("click", function() { 

    displayItem(arrayResponse[++index]) 

    }); 

    function displayItem(item) { 
    $("#name").val(item.name); 
    $("#author").val(item.author); 
    $("#content").val(item.content); 
    } 
}); 

Answer 1

変更この：これに

$("#nextButton").bind("click", function(){ 
    displayItem(arrayResponse[++index]) 
}); 

：

$("#nextButton").bind("click", function(){ 
    displayItem(arrayResponse[index]); 
    index++; 
}); 

Answer 2

私はthis jsfiddleを作成し、完璧に動作しているようです。このtest json

を使用してコードをチェックします。あなたのjsonに何らかのエラーがあるはずです。

HTML：

<input id="name" /><br> 
<input id="author" /><br> 
<input id="content" /><br> 
<button id="nextButton">Next</button> 

のJs：

$(document).ready(function() { 
    var firstElement; 
    var arrayResponse; 
    var index =0;   

var request = new XMLHttpRequest(); 

// When the file has loaded, 
request.onload = function() { 

    // parse the JSON text into an array of post objects. 
    arrayResponse = JSON.parse(request.responseText); 

    firstelement = arrayResponse[0]; 

    $("#name").val(firstelement.id); 
    $("#author").val(firstelement.name); 
    $("#content").val(firstelement.username); 


    // Pass the posts array to the callback. 

}; 
request.open("GET", "https://jsonplaceholder.typicode.com/users", true); 
request.send(null); 



$("#nextButton").bind("click", function(){ 

    displayItem(arrayResponse[++index]) 

});  

function displayItem(item) { 
     $("#name").val(item.id); 
     $("#author").val(item.name); 
     $("#content").val(item.username);   
} 
});