Node.jsで検索結果を全て表示したいです(fetchAllができません)

発生している問題

データベースには以下の様なデータを保存しています。

id name comment
1 カレー test1
2 シチュー test2
3 カレー　test3

料理名（name）を検索をしてその結果を表示するようにしているのですが、「シチュー」の様に１つだけの場合は検索結果を表示することができるのですが、「カレー」の様に２つ以上ある場合に１つしか検索結果を表示することができません。
検索結果をすべて表示するためにfetchをfetchAllに変え、検索結果を表示する部分をforでループさせてみましたが上手くいきませんでした。
どうすれば検索結果を全て表示することができるでしょうか？

また、検索結果が０個（例えば「味噌汁」を検索）の場合にエンドレスに検索を続けてしまうためなのか検索が終わらずページが更新できない問題が出てしまいます。
可能であればそちらの解決方法もご教授頂けると幸いです。
よろしくお願いいたします。

該当のソースコード

<body>
		<div role="main">
            <form method="post" action="/hello/add" name="test">
				<div>
					<span>料理名：</span>
                    <input type="text" name="name" value="<%= form.name %>">
                </div>
				<div>
                    </td><input type="submit" value="検索">
                </div>
			</form>
		</div>
		
			<div>
					<% if (mydata != null){ %>
					<p><ul>
						<li><%- mydata.id %></li>
						<li><%- mydata.attributes.name %></li>
						<li><%- mydata.attributes.comment  %></li>
					</ul></p>
					<% } %>
			</div>
</body>

var express = require('express');
var router = express.Router();
var mysql = require("mysql");

var knex = require("knex")({
    dialect: "mysql",
    connection: {
        host     : "localhost",
        user     : "root",
        password : "",
        database : "db",
        charset  : "utf8"
    }
});

var Bookshelf = require("bookshelf")(knex);

var MyData = Bookshelf.Model.extend({
    tableName: "mydata"
});

//MySQLの設定情報
var mysql_setting = {
    host     : "localhost",
    user     : "root",
    password : "",
    database : "db"
};


//ADD
router.get("/add", (req, res, next) => {
    var data = {
        form: {name:""},
        mydata: null,
    }
    res.render("hello/add", data);
});

router.post('/add', (req, res, next) => {
        new MyData().where("name", "=", req.body.name).fetch().then((collection) => {
            var data = {
                form: req.body,
                mydata: collection,
            };
            res.render("hello/add", data);
        })

});

module.exports = router;

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

回答1件

ベストアンサー

クエリを実行して複数の結果を返す場合、2層のオブジェクト化されているので、同じように記述してもだめですよ。

[
  ["id":1,"name":"カレー","comment":"スープカレー"],
  ["id":3,"name":"カレー","comment":"スパイスカレー"]
]

なので、オブジェクトをループさせる処理がテンプレートか、スクリプト内で必要です。

投稿2019/11/22 02:51

FKM

総合スコア3647

jsrookie

2019/11/22 14:48

回答ありがとうございます。 >>なので、オブジェクトをループさせる処理がテンプレートか、スクリプト内で必要です。ここの部分が分かりません。ループ処理は ``` <% for (var i in content) { %> <p><ul> <li><%- content[i].id %></li> <li><%- content[i].attributes.name %></li> <li><%- content[i].attributes.comment %></li> </ul></p> <% } %> ``` ``` router.post('/add', (req, res, next) => { new MyData().where("name", "=", req.body.name).fetchAll({withRelated: ["user"]}).then((collection) => { var data = { form: req.body, mydata: collection, content: collection.toArray() }; res.render("hello/add", data); }) } ``` のようにしているのですが、こういうことではありませんですか？

FKM

2019/11/23 01:07 編集

まずはconsole.logで取得したdataの値を見てみてください。今のjsはconsole.logでオブジェクトの確認もできますので。そのオブジェクトをejsテンプレートでループさせる際、for( key in objects )ではキーでないと正しく取得できない場合があるので、今回はインデックスなのでfor ( val of objects )の方がいいかも知れません。

jsrookie

2019/11/24 19:44

fetchAllではdataが見れなかったので、質問した際の最初のコード router.post('/add', (req, res, next) => { new MyData().where("name", "=", req.body.name).fetch().then((collection) => { var data = { form: req.body, mydata: collection, }; res.render("hello/add", data); }) }); でdataを見てみたところ { form: [Object: null prototype] { name: 'カレー', comment: 'test1', search: '検索' }, mydata: ModelBase { attributes: [Object: null prototype] { id: 1, name: 'カレー', comment: 'test1' }, _previousAttributes: { id: 1, name: 'カレー', comment: 'test1' }, changed: [Object: null prototype] {}, relations: {}, cid: 'c1', _knex: null, id: 1 } } となっていました。現状はfetchAllで検索結果を表示するためにcontent: collection.toArray()で配列にし、for( var i in content )で配列を１つずつ表示しようとして失敗しているのだと思います。（勉強した本に書いてある通りにやっています）そこでfor ( val of objects )を試してみようとしたのですがvalとは何を入れればよいのでしょうか？また、今回確認したdataの値ではやっぱりfor ( val of objects )の方がいいんでしょうか？長文失礼しました。

FKM

2019/11/25 09:27 編集

phpのforeachみたいなもので、for( val of objects)はオブジェクトに対して、インデックスを取得しないでも値を展開できるものです。console.logで取得したオブジェクトを見れば、json形式になっているはずですよ。そして、そのオブジェクト形式はfor( ary in arrays)は配列に対して取得するループ式なので、オブジェクトのプロパティ取得はできません

jsrookie

2019/11/26 06:50

FKMさんの回答を参考に試行錯誤した結果、無事検索結果をすべて表示することができました。ありがとうございました。

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