How can I loop through a jquery array and then output each item (starting at index 0) one at a time?

Question

I'm trying to collect user responses and add them into the answers array. Then I want to display the most recent user input (answers[0]) into the .user-answer div. I've managed to get that part taken care of but if you see a better way to do it then please show me.

The second part of is that I want to show the items in the array one at a time in the .dynamic-content h2 slot. I need to loop through the array (starting at answers[0]), pull out each item, show it in the div and then move to the next item and show it in the div.

Here's a link to the CodePen.

HTML

<div class="answer">
  <h1>Life, Liberty, and </h1>
</div>

<div class="user-answer">
  <h1>_________</h1>
</div>

<input type="text"/>
<input type="submit"/>

<div class="dynamic-content">
  <h1>What is your pursuit of happiness?</h1>
  <h2>Output array items here</h2>
</div>

JavaScript

// create an empty array
var answers = []; 

// STORE AND OUTPUT DATA ON SUBMISSION

function handleUserInput() {

  // store user input
  var userInput = $('input[type=text]').val(); 

  // append input value to answers array
  answers.unshift(userInput); 

  // add latest user input into the HTML
  $('.user-answer').html('<h1>' + answers[0] + '</h1>'); 

}

// RUN FUNCTION ON SUBMISSION

$('input[type=submit]').on('click', function() {
  handleUserInput();
});

Christos Lytras · Answer 1 · 2016-11-15T15:17:51.337

First, I don't know if you want to do this on server side or in client side, but for server side you need to make it work with a server side scripting language, like PHP, or Perl. For clent side, you need to cancel the default submit event when user clicks the submit button, else the page will refresh posting the form data.

So, to do this without the page refreshing, first add the event to the onclick event and pass it to your handleUserInput function like this:

$('input[type=submit]').on('click', function(e) {
  handleUserInput(e);
  rotate();
});

then, cancel the event by using preventDefault to the event object:

e.preventDefault();

now, to display the data to .dynamic-content and add the answers in h2 tags, you first need to remove all h2 elements (because you already have an h2 element there, or you could also prepend if you remove the h2 Output array items here tag) and then add all the answers starting from the first one like this:

$('.dynamic-content h2').remove();

$.each(answers, function(i, v) {
  $('.dynamic-content').append($('<h2/>').text(v));
});

The final code will be something like this:

var answers = []; // create an empty array

// STORE DATA ON SUBMISSION
function handleUserInput(e) {
  e.preventDefault();

  var userInput = $('input[type=text]').val(); // store user input

  answers.unshift(userInput); // append value to answers array

  // $('.user-answer').fadeIn().html('<h1>' + answers[0] + '</h1>').delay( 500 ).fadeOut(); // add user input into the HTML

  $('.user-answer').html('<h1>' + answers[0] + '</h1>'); // add user input into the HTML

  $('.dynamic-content h2').remove();

  $.each(answers, function(i, v) {
    $('.dynamic-content').append($('<h2/>').text(v));
  });

  // $('.answer').html('<h1>' + answers[0] + '</h1>'); 
  // $.each(answers[0 + i], function() {
  //   $('.answer').fadeIn().html('<h1>' + answers + '</h1>').delay( 500 ).fadeOut();
  // });

}

$('input[type=submit]').on('click', function(e) {
  handleUserInput(e);
  rotate();
});

http://codepen.io/clytras/pen/zoBXpE

score 0 · Answer 2 · answered Nov 15 '16 at 15:11

Just change your JS a little bit to this:

    var answers = []; // create an empty array
    
    // STORE DATA ON SUBMISSION
    function handleUserInput() {
      var userInput = $('input[type=text]').val(); 
      $('.user-answer').html('<h1>' + userInput + '</h1>'); 
      answers.push(userInput);
      $('.dynamic-content h2').html(answers + ', ');
    }
    
    $('input[type=submit]').on('click', function() {
      handleUserInput();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer">
  <h1>Life, Liberty, and </h1>
</div>

<div class="user-answer">
  <h1>_________</h1>
</div>

<input type="text"/>
<input type="submit"/>

<div class="dynamic-content">
  <h1>What is your pursuit of happiness?</h1>
  <h2>Output array items here</h2>
</div>

Thanks for the answer. This changed the top and bottom values but it didn't loop through the items, showing them one at a time. That's what I wanted to do. Instead, it appended the items into one long array, showing them all at the same time. See the accepted answer's Pen to see what I was looking for. — Brian Haferkamp, Nov 21 '16 at 19:12

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

It's not the best way but here it goes. This method is like you asked to change the SAME DIV dynamically, so no other items are created, they just "change"

Add this function:

function rotateTerm() {
  if(answers.length>0){
  var ct = $("#rotate").data("term") || 0;
  $("#rotate").data("term", ct == answers.length -1 ? 0 : ct + 1).text(answers[ct]).fadeIn().delay(2000).fadeOut(200,function(){
rotateTerm();
  });
 }
}
$(rotateTerm);

Then in your submission put:

$('input[type=submit]').on('click', function() {
  handleUserInput(); 
  $(rotateTerm);
});

working CodePen thanks to Nick Craver's answer in this thread.

edited May 23 '17 at 12:13

Community

1
1

answered Nov 15 '16 at 16:09

Jonathan Romero

164
6

Thanks! This is exactly what I was looking for. I found a script that would loop through list items but i don't want to continue adding to the HTML making it bulkier for people to download the HTML later. – Brian Haferkamp Nov 21 '16 at 19:13

How can I loop through a jquery array and then output each item (starting at index 0) one at a time?

HTML

JavaScript

3 Answers3