.each() function only outputting last result in array

Question

I have string. I then split the string to make an array.

I use .each() to hopefully iterate through the array one by one and produce a certain output.

However, when I try to do this, I only get the value in the array outputted.

How comes?

I have set up a jsfiddle to demonstate what I have tried so far and the result I am getting:

var string = 'this is a string';
stringArray = string.split('');

$.each(stringArray, function(index, value){
    $('#output').text(index + ' : ' + value);
});

I am trying to achieve it where user inputs text, clicks submit and it returns there input to them, but every time they click submit it replaces the current output.

Tats_innit · Accepted Answer · 2012-06-20 08:33:07Z

6

see here http://jsfiddle.net/S7Z6K/4/ or http://jsfiddle.net/S7Z6K/6/

You are overwriting the old result set with .text

In the code you can see I am appending old result set to new one's hence everything appears fine.

hope this helps!

code

var string = 'this is a string';
    stringArray = string.split('');
    var hulkfoo = "";
    $.each(stringArray, function(index, value){
        hulkfoo += index + ' : ' + value + " -- "; 
        $('#output').text(hulkfoo);
    });

answered Jun 20, 2012 at 8:33

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

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

Comments

jfriend00 · Accepted Answer · 2012-06-20 08:32:45Z

4

You are repeatedly setting the value of the output element to each successive array value and the only one you will see is the last value that is set and that is indeed exactly what your jsFiddle shows.

.text() replaces the current contents with new contents. It does not add content to what is already there.

We could advise better what code to use isntead if you described the actual problem you're trying to solve. I doubt you really want to use .append() because it's silly to split a string into it's pieces and then just append them all together again one character at a time. You must be wanting to do something more interesting than that.

answered Jun 20, 2012 at 8:32

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Comments

Lix · Accepted Answer · 2012-06-20 08:32:53Z

3

What you are doing here is simply overriding the .text() value of #output with each iteration.

You should try using the .append() function.

$.each(stringArray, function(index, value){
    $('#output').append(index + ' : ' + value);
});

Alternatively, for explanation's sake, you could also do something like this -

var element = $('#output') // use cache to improve performance
element.text( element.text() + index + ' : ' + value);

answered Jun 20, 2012 at 8:32

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Comments

Dan Lister · Accepted Answer · 2012-06-20 08:33:20Z

3

Try this....

var string = 'this is a string',
    stringArray = string.split('');

$.each(stringArray, function(index, value){
    $('#output').append(index + ' : ' + value);
});

answered Jun 20, 2012 at 8:33

Dan Lister

2,5832 gold badges21 silver badges36 bronze badges

Comments

Eswar Rajesh Pinapala · Accepted Answer · 2012-06-20 08:32:58Z

2

You are continuously updating the #output, and the only thing that stays is the val in the last iteration.

try .append() instead of text updated demo : http://jsfiddle.net/epinapala/S7Z6K/5/

var string = 'this is a string';
    stringArray = string.split('');
    alert(stringArray);
    $.each(stringArray, function(index, value){
        $('#output').append(index + ' : ' + value);
    });

answered Jun 20, 2012 at 8:32

Eswar Rajesh Pinapala

4,9314 gold badges35 silver badges40 bronze badges

Comments

thecodeparadox · Accepted Answer · 2012-06-20 08:41:16Z

2

var string = 'this is a string';
    stringArray = string.split(/\s/);

    $.each(stringArray, function(index, value){
        $('#output').text(function(i, oldText) {
           return oldText += index + ' : ' + value;
        });
    });

DEMO

answered Jun 20, 2012 at 8:41

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Comments

cmilhench · Accepted Answer · 2012-06-20 09:01:11Z

This is because the text() function will replace the inner text of your element, each and every time that it is called. You could simply replace text with append() in order to append text instead, although this would not be formatted.

If you wanted to format your output you could do something like this; http://jsfiddle.net/S7Z6K/8/

var string= 'this is a string';
stringArray = string.split('');

$.each(stringArray, function(index, value){
    var div = $('<div></div>').text(index + ' : ' + value)
    $('#output').append(div);
});

To clear the output and update each time the button is pressed so that every time they click submit it replaces the current output you can do something like the following; http://jsfiddle.net/S7Z6K/15/

$('#submit').click(function(){

    var value = $('#value').val();
    var array = value.split('');
    var output = $('#output');
    output.empty(); 
    $.each(array, function(index, value){
        output.append('<div>' + index + ' : ' + value + '</div>');
    });
});

Marek · Accepted Answer · 2012-06-20 13:15:22Z

-1

text() function does not append text to output so what you see is the result of last replace

edited Jun 20, 2012 at 13:15

answered Jun 20, 2012 at 8:35

Marek

1,8281 gold badge31 silver badges49 bronze badges

Collectives™ on Stack Overflow

.each() function only outputting last result in array

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related