firebaseを利用した情報共有サイトの作成

前提・実現したいこと

firebaseでデータベースのようなもので、ユーザーが投稿した情報をソートしたり検索したりする機構を作る。

該当のソースコード

const main = ()=>
firebase.database().ref('/simplebbs/posts').limitToLast(10).on('value', snapshot=>{
const posts = snapshot.exists() ? snapshot.val() : {}
let html = ''
for(const [id, {name, content, date, locate0, locate1, locate2}] of Object.entries(posts).reverse())
html += makeReply(id, name, content, date, locate0, locate1, locate2)
document.querySelector('#replies').innerHTML = html
})

const makeReply = (id, name, content, locate0, locate1, locate2, date) => `<div class="reply">

<div class=<h1>"name"</h1>>${name}</div> <div class="date">${date}</div> <div class="content">${content}</div> <div class="locate0">${locate0}</div> <div class="locate1">${locate1}</div> <div class="locate2">${locate2}</div> <button class="delete" onclick="deleteReply('${id}')">delete</button> </div>` ```html <script> $(function () { searchWord = function(){ var searchText = $(this).val(), // 検索ボックスに入力された値 targetText;

$('.target-area li').each(function() {
  targetText = $(this).text();

  if (targetText.indexOf(searchText) != -1) {
    $(this).removeClass('hidden');
  } else {
    $(this).addClass('hidden');
  }
});

};
</script>

</head> <body> <body> <div class="wrapper"> <div class="search-area"> <form> <input type="text" id="search-text" placeholder="検索ワードを入力"> </form> <div class="search-result"> <div class="search-result__hit-num"></div> <div id="search-result__list"></div> </div> </div>

<ul class="target-area">
	<div id="replies"></div>

</div> ```ここに言語名を入力 html,javascript ``` ```参考 https://qiita.com/nacasora/items/713919f7a56024f5c59f

詳細

repliesですべて表示しているので、バラバラに出力してリスト表示すればいい話なのですが、どこに<li>を付けたらいいのかを教えていただきたいです。
または、違った方法の、投稿されたものをリスト化する方法を教えていただきたいです。

行動規範の内容に同意します

回答1件

質問とはズレますが、firebaseでbbsが作れれば良いのですか？

https://qiita.com/nacasora/items/713919f7a56024f5c59f

投稿2018/10/02 13:31

oikashinoa

総合スコア2826

kuria

2018/10/03 00:16

そちらを参考にした結果ですね、javascriptには疎いもので、、、

oikashinoa

2018/10/03 01:34

参考にしたものは書いたほうが良いですよ。回答被りますし、そちらのレベル感が分かりません。ソースを見てるとある程度わかっている方かと感じてました。いまどういうHTMLが出力されて、どのように変えたいのかを質問に書けば回答得やすいと思います。

kuria

2018/10/03 02:03

質問するというのがはじめてなものでして、教えてくださりありがとうございます。レベルに関しては最近触りだした初心者です。目標としては情報をテーブル化したいです。

oikashinoa

2018/10/03 02:53

こんな風なテーブルにしたいかを自分で作成してみてください。表題の有り無しや先頭にナンバー付けたいとか有るでしょう。今のままだと丸投げと見られ回答つかない可能性ありますよ。出張中でコチラからは動作確認とかできないので、なるだけ自分でやった見てその結果を質問に追記してください。そうすれば他の人からも回答付くでしょう

行動規範の内容に同意します