getByQueryで取得したレコードをhtmlにappendChildしたい

Open Q&A
1

お世話になっております。

アクションテーブルからアクションテーブルクエリを使って取得したレコードを、
html上にセレクトボックス として出力したく思っています。

list1 = [
{ “number”:“1”, “name”:“りんご” },
{ “number”:“2”, “name”:“みかん” },
{ “number”:“3”, “name”:“なし” },
{ “number”:“4”, “name”:“オレンジ” }
]

ユーザーの行動に応じて、こういうレコードが取得できたとき
「りんご」「みかん」「なし」「オレンジ」のセレクトボックスを
html上に表示したい想定です。

最初は以下のように書いていました。

var params = { query: fruits };
table.getByQuery(‘find_fruits’, params, function(err, items){
if (err) console.error(err);
for(var i=0;i<items.length;i++){
var op = document.createElement(“option”);
op.value = items[i].fruits;
op.text = items[i].fruits;
document.getElementById(“select1”).appendChild(op);
}
});

ただChromeコンソール上で『Cannot read property ‘appendChild’ of null』のエラーが出てしまったので、
読み込み順の問題かと思い下記のコードを試しました。

var params = { query: fruits };
table.getByQuery(‘find_fruits’, params, function(err, items){
if (err) console.error(err);
window.addEventListener(‘DOMContentLoaded’,function(){
items.forEach(function(x){
var opt=document.createElement(‘option’);
opt.value=x.fruits;
opt.text=x.fruits;
document.querySelector(‘#select1’).appendChild(opt);
});
});

するとループが回らなくなってしまったので、
window.addEventListener(‘DOMContentLoaded’,function(){
});
だけ外しましたが、それでもappendChildできない（エラーメッセージはない）状態です。

解法について何かしら、お心当たりございますでしょうか…
どの点を心当たりとして探っていくかも煮詰まっている状態です。
もし参考などございましたら、ご教示いただけますと大変幸いです。

2

完全にJavascriptのお話ですが、
getByQueryでデータが帰ってきた後に「DOMContentLoaded」をlistnして、関数を実行されていますが
getByQuery関数で、データが帰ってきたときには、「DOMContentLoaded」は完了している可能性が高いです。

よって、addEventLister は不要かと思いますので、こんな感じで試してみると良いかと思います。

var params = {
    query: fruits
};

table.getByQuery("find_fruits", params, function (err, items) {
    if (err) console.error(err);
    items.forEach(function (x) {
        var opt = document.createElement("option");
        opt.value = x.fruits;
        opt.text = x.fruits;
        document.querySelector("#select1").appendChild(opt);
    });
});
3

丁寧に、また迅速なご回答をありがとうございます！
ご教示いただいたコードを参考に、無事動かすことができました。

大変参考になりました…。お忙しい中ありがとうございました。

「いいね！」 1