JQuery nächste Element von Array anzeigen

Question

Ich versuche, das nächste Element aus Array Json mit DisplayItem-Funktion anzuzeigen, aber nach dem Klicken auf die Schaltfläche, lädt das Formular den ersten Wert (ArrayResponse [0]). Was soll ich tun, um stattdessen den nächsten Artikel anzuzeigen? diese

$(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

Wechsel:

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

dazu:

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

Answer 2

Ich habe den Code mit diesem test json

Ich habe this jsfiddle und es scheint perfekt zu arbeiten. Es muss eine Art von Fehler mit Ihrem JSON geben.

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);   
} 
});