Adding array that has text with spaces into TextArea using JQuery and append()

Question

I am trying to append to my page an array inside a TextArea and I break it every time I have a space between characters in array. Let's say I have ingredients in array: "rice", "oil", "soy milk", "apple" I am using the following JQuery syntax:

$("#container").append("<input type = 'text' id = 'ingredients' value = " + ingArrayTest+ ">");

My final result will have only: "rice, oil, soy" because space will break the rest of the array in the display. Is there a way to wrap the array so it doesn't happen?

Thanks in advance!

There's a lot of array functions in JS. You can join your array for example. Take a look here: developer.mozilla.org/en/docs/Web/JavaScript/Reference/… — lesssugar
– lesssugar, Commented Dec 2, 2014 at 20:39
Irfornal --> I want to show them all in the same line (textarea in this case) — Pavel Zagalsky
– Pavel Zagalsky, Commented Dec 2, 2014 at 20:43

bob-fornal · Accepted Answer · 2014-12-02 21:03:55Z

1

You can use a simple array join, assuming I am reading this correctly. Try

ingArrayTest.join("\n")

... in place of ingArrayTest above. Spaces could be used in place of the '\n' ...

BASED ON DISCUSSION, try:

var ingArrayTest = ["Milk", "Soy Milk", "Apple"];
var ingString = ingArrayTest.join(" ");
$("#container").append("<input type='text' id='ingredients' value='" + ingString  + "'>");

...note the single quotes near value. Watch single quotes versus double; very important.

edited Dec 2, 2014 at 21:03

answered Dec 2, 2014 at 20:42

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

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

6 Comments

bob-fornal Over a year ago

try ... .join(" ") ... assuming ingArrayTest is the array.

bob-fornal Over a year ago

The previous will make one string with SPACES as the separator.

Pavel Zagalsky Over a year ago

Still doesn't look good. This is the HTML that is generated: <input type="text" id="ingredients" dir="rtl" size="70" value="rice" "oil"="" "soy="" milk"="">

Pavel Zagalsky Over a year ago

bob-fornal Over a year ago

With my edit, you should be able to examine the string after generation to see what might be causing the issue. Use console.log ...

|

Collectives™ on Stack Overflow

Adding array that has text with spaces into TextArea using JQuery and append()

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related