parse.com javascript display series of playing card images from single string

Question

my approaches aren't working.

I have users that can save random sequences of cards to the [parse.com] database. Now I want to display those cards as nice images.

An example of a sequence (string) from the database would be: "7D7H7H7D7C7C7C7C7D7H"

I would like to use that string to display a series of images. In this case 20 images,

<img src="7D.jpg"><img src="7H.jpg"><img src="7H.jpg">

and so on, until all cards in that string are displayed.

I currently display the sequence from the parse.com database, it's just an ugly string for now.

query.find({
      success: function(results){
        var output = "";

        for (var i in results) {
          var sequence = results[i].get("Sequence");
          var id = results[i].id
          output += "<p>"+sequence+"</p>";

The 'output' is currently that string or 'sequence' example above.

Any help or ideas on how I can start displaying images is appreciated.

Answer 1

Are all of the card names 2 letters long?

if so, you can try creating a helper function outside of your code:

var cardRender = function(string) {
  var output = '';
  for (var i = 0; i < string.length; i+= 2) {
    output += "<img src='" + string[i] + string[i+1] + ".jpg' >";
  }
  return output;
}

then call it in your original code:

query.find({
  success: function(results){
    var output = "";

    for (var i in results) {
      var sequence = results[i].get("Sequence");
      var id = results[i].id
      output += cardRender(sequence);

cardRender will return a string composed of a bunch of image elements. you can use it to create the result you want.