使用 Parse.com 用 Ja​​vascript 值填充 HTML 表格 [英] Fill a HTML table with Javascript values using Parse.com

问题描述

我希望使用表格中显示的来自我的 iOS 应用程序的数据创建一个简单的 HTML 网站.我将 Parse.com 用于我的移动数据，我将使用 Javascript 在网站上显示它.

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.

我之前开发了一个基于JSP的网站，但是这次我使用的是Wordpress的Javascript插件，所以我无法使用JSP文件.因此，我需要处理 HTML 代码中的所有内容.

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.

有没有办法将以下 Parse.com 查询放入 HTML 表格中?

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

推荐答案

为要显示此数据的页面创建自定义页面模板.例如在 Wordpress Admin 中创建一个名为score-table"的页面，然后在您的主题中创建一个名为page-score-table.php"的页面模板.

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'.

如果需要，请在页面和 jQuery 中包含解析库脚本(尽管这应该由 Wordpress 加载)，然后使用类似的内容.

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 在此处展示，设置一个虚拟解析表向您展示.

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

实际上用这个替换成功函数，如果你有很多行，我相信 append 是相当昂贵的...

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

这篇关于使用 Parse.com 用 Ja​​vascript 值填充 HTML 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！