How to append text to all values of javascript Array

Question

Basically, I need to convert a string

"23423,1616,3461743,1345"

to a string

"<img src='23423'></img><img src='1616'></img><img src='3461743'></img><img src='1345'></img>

So far I have tried:

    var PhotoArray=JSONeventobject.Events[i].FileNameArray.split(","); // Just convert this string to array

    for (i = 0; i < PhotoArray.length; i++) {
        PhotoArray[i] = "<img src='"+PhotoArray[i]+"</img>";
    }


            var Photostring = PhotoArray.toString().replace(",", "")

But this causes my browser to crash. It makes sense to me :/

Timmmm · Accepted Answer · 2020-01-25 10:17:38Z

18

Some terrible answers here. Try:

"1,2,3,4".split(",").map(function(a) { return "<foo>" + a + "</foo>"; }).join("");

Or with slightly more modern Javascript:

"1,2,3,4".split(",").map(a => `<foo>${a}</foo>`).join("");

Also please be aware of HTML injection.

edited Jan 25, 2020 at 10:17

answered Jun 3, 2015 at 9:05

Timmmm

99.1k83 gold badges426 silver badges604 bronze badges

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

Comments

Will · Accepted Answer · 2011-10-26 03:33:58Z

5

You need to make sure you close your image tag. Another thing that may cause the problem is that i is undefined. Does your browser give an error message?

var str = "23423,1616,3461743,1345";
var PhotoArray = str.split(",");
for ( var i = 0; i < PhotoArray.length; i++ ) {
    PhotoArray[i] = "<img src=\"" + PhotoArray[i] + "\"></img>";
}
str = PhotoArray.join("");

edited Oct 26, 2011 at 3:33

answered Oct 26, 2011 at 3:18

Will

20.3k7 gold badges49 silver badges48 bronze badges

1 Comment

Quentin Over a year ago

The end tag for image elements is forbidden.

Michael Low · Accepted Answer · 2011-10-26 03:14:50Z

1

There isn't an </img> tag in HTML, so you don't need that.

In PhotoArray[i] = "<img src='"+PhotoArray[i]+"</img>"; you're not ending the image tag, this will produce <img src='1616</img> which is why it gives strange results. Try PhotoArray[i] = "<img src='"+PhotoArray[i]+"'>"; instead.

answered Oct 26, 2011 at 3:14

Michael Low

24.5k17 gold badges85 silver badges119 bronze badges

1 Comment

Michael Low Over a year ago

How ? What browser ? Can you put a repro on jsfiddle so we can see ?

Mike Rockétt · Accepted Answer · 2017-01-02 10:09:17Z

1

If you don't want to use a loop (and I didn't want to use a loop), you could do this:

var str = "23423,1616,3461743,1345";

str = ("," + str + ",").split(',').join("'></img>,<img src='").split(",").slice(1,-1).join('');

console.log(str);

What it's doing is adding a comma on either side of the list, splitting the string into an array based on those commas, then adding the img tags on either side with the join call, splitting again based on the command between opening img tag and closing img tag we just put in, burning the first and last elements in the array, and then finally joining them all back together into a single string.

The console output is:

<img src='23423'></img><imgsrc='1616'></img><img src='3461743'></img><img src='1345'></img>

Nothing like an ugly one line solution!

edited Jan 2, 2017 at 10:09

Mike Rockétt

9,0274 gold badges48 silver badges87 bronze badges

answered May 12, 2015 at 18:28

Brian

3,3345 gold badges34 silver badges44 bronze badges

Comments

ruakh · Accepted Answer · 2011-10-26 03:18:01Z

0

In addition to what @mikel says --

You're using the same variable, i, as your index into JSONeventobject.Events and as your index into PhotoArray. Without seeing the rest of your code, I don't know whether that's going to be a problem, but it's worth checking.

Also, rather than converting to an array and back, it seems simpler to just write:

var Photostring = "<img src='" + JSONeventobject.Events[i].FileNameArray.replace(/,/g, "'/><img src='") + "'/>";

(that is, replace all the commas with '/><img src=', prefix the first element's <img src=', and append the last element's '/>).

answered Oct 26, 2011 at 3:18

ruakh

185k29 gold badges292 silver badges324 bronze badges

Comments

chown · Accepted Answer · 2011-11-18 01:23:18Z

0

Is the variable 'i' declared as var?

edited Nov 18, 2011 at 1:23

chown

52.9k17 gold badges138 silver badges170 bronze badges

answered Oct 26, 2011 at 3:18

Xhalent

3,96424 silver badges21 bronze badges

Comments

Manohar Reddy Poreddy · Accepted Answer · 2015-06-13 10:32:33Z

#1    str.split([separator[, limit]])

split function splits a string into an array based on separator we give. limit is optional.

#2    arr.map(callback[, thisArg])

map function returns new array that is formed from result of calling "callback" function for each element in "arr". thisArg is optional.

#1    str.split([separator[, limit]])

join function joins all elements of an array, into a string. limit is optional.

So, answer is:

var photoString = "23423,1616,3461743,1345";
var photoArray = str.split(",").map(
    function(a) {
        return '<img src="' + a + '"></img>';
    }
).join("");

Sources: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/split https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Collectives™ on Stack Overflow

How to append text to all values of javascript Array

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related