Loop through a string with jQuery/javascript

Question

Hi

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

Answer 1

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.

Answer 2

You can use a regular expression that matches a single character, and replace each character with an image tag that contains the character:

var html = data.replace(/(.)/g, '<img src="$1.png" />')

The pattern . matches a single character, the parentheses around it makes it a match to output, the g option stands for global so that it replaces all mathces, not just the first one. The $1 marker in the replacement string is where the match output (the character) will be placed.

Answer 3

To loop through the characters in a string you would do this:

var s = '123456';
for ( var i = 0; i < s.length; i++ )
{
  // `s.charAt(i)` gets the character
  // you may want to do a some jQuery thing here, like $('<img...>')
  document.write( '<img src="' + s.charAt(i) + '.png" />' );
}