JQuery display next item from array

Question

I am trying to display next item from array json with displayItem function, but after click on the button, the form reloads the first value (arrayResponse[0]). What should I do to display the next item instead?

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

You asked the same question twice : stackoverflow.com/questions/44761891/…, I don't think this is a good way to go on StackOverflow — Gabriel Bourgault
– Gabriel Bourgault, Commented Jun 26, 2017 at 17:25

Alekos Dordas · Accepted Answer · 2017-06-26 10:26:36Z

1

I checked your code with this test json

I created this jsfiddle and it seems to work perfect. There must be some kind of error with your 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);        
 }  
});

answered Jun 26, 2017 at 10:26

Alekos Dordas

8107 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IProgrammer Over a year ago

Hi! thanks for youe question .. i replaced url with my localhost (127.0.0.1:8887/posts.json) and WORK IT on jsfiddle.net..so my json file it's good!!. But on the chrome browser doesn't work!!

Jan Ciołek · Accepted Answer · 2017-06-26 10:25:11Z

0

Change this :

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

to this:

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

edited Jun 26, 2017 at 10:25

user2399035

answered Jun 26, 2017 at 10:22

Jan Ciołek

1,8163 gold badges20 silver badges34 bronze badges

2 Comments

IProgrammer Over a year ago

Thanks for your answer.. :) But form re-load first value again

Jan Ciołek Over a year ago

Maybe using jQuery ajax functions is a good idea jQuery get

Collectives™ on Stack Overflow

JQuery display next item from array

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related