Fill a HTML table with Javascript values using Parse.com

Question

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);
  }
});

DevFox · Accepted Answer · 2014-05-02 10:19:39Z

8

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);
}

edited May 2, 2014 at 10:19

answered May 2, 2014 at 10:01

DevFox

5542 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

nickjf89 Over a year ago

Thank you! I'm going to have a play around and see where I get to!

DevFox Over a year ago

Let me know if you need any more help.

nickjf89 Over a year ago

You, sir, are a hero. Thank you so much. I shall learn a lot from this!

RyanG Over a year ago

@DevFox I, like nick, need to display Parse data onto a Wordpress page using Javascript. I imported the parse library in my themes footer.php, and used the following example you gave (replacing table names), but I get a blank table on my Wordpress page. Also, I tried displaying an alert after the Parse code, and that does not get called unless I remove the Parse code. Any suggestions?

RyanG Over a year ago

@nickjf89 Did you ever get parse data displaying in your Wordpress page?

|

Collectives™ on Stack Overflow

Fill a HTML table with Javascript values using Parse.com

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related