如何在html选项框中显示查询结果

How to show query results in html options box?

本文关键字:显示 查询 结果 选项 html      更新时间:2023-09-26

使用parse.com和JavaScript

这个查询正确地返回了我的结果,我知道我想通过html页面上的选项框得到这些结果。我认为我可以将"朋友"传递到第二个代码块中来实现这一点,但这行不通。在(2)代码块中使用它们之前,我需要先保存结果吗?

1……

query.find({
            success: function(results) {
                var friends = [];
                for (var i = 0; i < results.length; i++) {
                    friends.push({
                        username: results[i].get('toUser').get('username'),
                        userId: results[i].get('toUser').id
                    });
                }

2

$(document).ready(function() {
var select = document.getElementById("selectNumber");
var options = (friends);
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}
    });

HTML

3

 <select id="selectNumber">
    <option>Choose a number</option>
</select>

live Demo,try this

第1部分

   friends.push({
            "username" : "+results[i].get('toUser').get('username')+",
            "userId" : "+results[i].get('toUser').id+"
     });

In 2 Part

  var select = document.getElementById("selectNumber");
  $.each(friends[0],function(i,v){
      var opt = v;
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      select.appendChild(el);
  })

问题是friends.push({ Json Object });

var option= (friends)是选项中的存储数组对象。但你需要迭代它并得到json值。

在查询的成功回调中对查询返回的数据进行操作。$(document).ready()时,数据不可用:)

这里的代码是异步的,这意味着JS为您的查询调用远程服务器并继续执行,直到它得到响应。一旦它得到它,它调用你的回调函数的结果。因此,您不能只在查询之后使用结果,因为您还没有得到响应。你必须确保在得到响应后使用,这就是为什么你必须在回调中(或在回调中调用的另一个函数中)编写代码的原因。

下面是一个例子:

HTML:

<p id="results1"></p>
<p id="results2"></p>

JS:

var results = [],
    query = JSON.stringify({foo: "bar"});
$.post('/echo/json/', {json: query}, function(data) {
    results.push(data.foo);
    $('#results2').text('in callback: ' + results.join(''));
});
$('#results1').text('after async call: ' + results.join(''));

如果您运行它,您应该看到在$.post调用之后,results仍然是空的,因为前面的调用是异步完成的。当执行回调时,results如预期的那样包含"bar"