使用Parse.com填充包含Javascript值的HTML表格 [英] Fill a HTML table with Javascript values using Parse.com

问题描述

我正在创建一个简单的HTML网站，其中包含iOS应用程序中显示的数据。我使用Parse.com作为我的移动数据，我将使用Javascript将其显示在网站上。

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

有没有办法将下面的Parse.com查询获取到HTML表格中？

  var GameScore = Parse.Object.extend（GameScore）; 
 var query = new Parse.Query（GameScore）; 
 query.equalTo（playerName，Dan Stemkoski）; 
 query.find（{
 success：function（results）{
 alert（Successfully retrieve+ results.length +scores。）; 
 //做某事（var i = 0; i< results.length; i ++）{
 var object = results [i]; 
 alert（object.id +'）返回的Parse.Object值
 - '+ object.get（'playerName'））; 
} 
}，
 error：function（error）{
 alert（Error：+ error.code + + error.message）; 
} 
}）; 
  

解决方案

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

包括解析如果需要的话，可以在页面和jQuery中使用库脚本（尽管这应该由Wordpress加载），然后使用类似的东西。

 < table id =results-table> 
< tr> 
< th>用户名< / th> 
分数< / th> 
< / tr> 
< / table> 
  

...

 <脚本> 
 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 [ （''）; 
（function（$）{
 $（'＃results-table'）。append（'< tr>< td> + object.get（'playerName'）+ < / td>< td>'+ object.get（'score'）+'< / td>< / tr>'）; 
}）（jQuery）; 
} 
}，
错误：函数（错误）{
 alert（Error：+ error.code ++ error.message）; 
} 
}） ; 
< / script> 
  

小提琴演出它在这里，设置一个虚拟Parse表来展示给你。

实际上用这个替换成功函数，如果你有一个很多行......

  ... 
 /// query.find（）之前// 
 var myScores =''; 
 ... 
成功：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）; 
} 
  

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

解决方案

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

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