Loop through a string with jQuery/javascript

javascript, jquery

Solution

I love `jQuery.map` for stuff like this. Just map (ie convert) each number to a snippet of html:

var images = jQuery.map((1234567 + '').split(''), function(n) {
  return '<img src="' + n + '.png" />'
})

images[0]; // <img src="1.png" />
images[1]; // <img src="2.png" />
images[2]; // <img src="3.png" />
// etc...

which you can then `join('')` and jam into the DOM in one swift punch:

$('#sometarget').append(images.join(''))

And bob's your uncle.

Problem

I am loading a simple txt file from the same server as the current web page using jQuery - this file will always include a plain number with no formatting - e.g. 123456 ``` $(document).ready(function(){ var test; $.getJSON('myfile.txt', function(data) { test = data; showAlert(); // this call will display actual value }); function showAlert() { alert(test); } }); ``` At the moment, the code pulls the file in and then shows the content in an alert box but what I want to do is read through the response character by character and create an HTML string which I can then insert in to the page - each character would be converted to an image tag. For example if the response was 123 I want to create a string holding the following HTML: ``` <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> ``` And then I will insert that string into a div on my page. Can anybody suggest how to go about looping through the response to create the img tags? Thanks

Original source