current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am looking to create a simple HTML website with the data from my iOS app displayed in tables. I use Parse.com for my mobile data, and I will be using Javascript to display it on the website.

I have developed a JSP-based website before, but this time I am using a Javascript plugin for Wordpress, so I cannot use JSP files. Therefore I will need to handle everything in HTML code.

Is there a way to get the following Parse.com query into a HTML table?

var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", "Dan Stemkoski");
query.find({
  success: function(results) {
    alert("Successfully retrieved " + results.length + " scores.");
    // Do something with the returned Parse.Object values
    for (var i = 0; i < results.length; i++) { 
      var object = results[i];
      alert(object.id + ' - ' + object.get('playerName'));
    }
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});
share|improve this question

1 Answer 1

up vote 0 down vote accepted

Create a custom page template for the page you want to show this data on. e.g. create a page called 'score-table' in Wordpress Admin and then create a page template in your theme called 'page-score-table.php'.

Include the parse library scripts in the page and jQuery if you need to (though this should be loaded by Wordpress anyway) and then use something like this.

<table id="results-table">
<tr>
  <th>User Name</th>
  <th>Score</th>
</tr>
</table>

...

<script>
Parse.initialize("Your", "Credentials");

var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", "Dan Stemkoski");
query.find({
    success: function(results) {
       for (var i = 0; i < results.length; i++) { 
           var object = results[i];
               (function($) {
                   $('#results-table').append('<tr><td>' + object.get('playerName') + '</td><td>' + object.get('score') + '</td></tr>');
               })(jQuery);
       }
    },
    error: function(error) {
        alert("Error: " + error.code + " " + error.message);
    }
});
</script>

Fiddle showing it HERE, set up a dummy Parse table to show you.

Actually replace the success function with this, I believe append is quite expensive if you have a lot of rows...

...
///before query.find();
var myScores='';
...
success: function(results) {
for (var i = 0; i < results.length; i++) { 
  var object = results[i];
  myScores+='<tr><td>' + object.get('playerName') + '</td><td>' + object.get('score') + '</td></tr>';
}
  (function($) {
      $('#results-table').append(myScores);
  })(jQuery);
}
share|improve this answer
    
Thank you! I'm going to have a play around and see where I get to! –  nickjf89 May 2 at 10:24
    
Let me know if you need any more help. –  DevFox May 2 at 10:25
    
You, sir, are a hero. Thank you so much. I shall learn a lot from this! –  nickjf89 May 2 at 11:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.