Question

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.