質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

1679閲覧

Expressでejsに配列を渡して表示できません

tuna-kan

総合スコア23

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/07/16 12:08

前提・実現したいこと

ユーザーの名前とアイコンの表示

発生している問題・エラーメッセージ

herokuでSNSを作っていますがnode.jsからejsにusersテーブルからusernamとicon情報を渡して表示したいのですがなぜか表示されません。

該当箇所以外は正常に表示されていてクエリ実行後にconsole.logで結果を調べると配列もちゃんと取得できています。
私の考えうることは試したので知恵をお貸しください。

該当のソースコード

Express

1app.get('/',(req,res)=>{ 2 const user_id=req.session.userId; 3 4 //トップページに投稿を表示 5 connection.query( //usersとpostを結合しusersに保存しているiconを取得 6 'SELECT * FROM post JOIN users ON user_id=id ORDER BY post_id DESC', //昇降順をpostのidの降順に 7 (error_d,results_d)=>{ 8 9 //該当コード 10 connection.query( 11 'SELECT * FROM users WHERE id=?', //ユーザー情報取得 12 [user_id], 13 (error_m,results_m)=>{ 14 res.render('top.ejs',{post:results_d,info:results_m,errors:[]}); 15 console.log(results_m); //正常に配列を出力しました 結果は後述 16 }); 17 }); 18 });

ejs

1<div class="myInfo"> 2 <span><%=info.username%></span><img src="<%=info.icon%>"> 3 </div>

sql

1CREATE TABLE `users` ( 2 `id` int(11) NOT NULL AUTO_INCREMENT, 3 `username` varchar(10) DEFAULT NULL, 4 `icon` char(200) DEFAULT '/images/icon.jpg', 5 `password` char(150) DEFAULT NULL, 6 `email` char(150) DEFAULT NULL, 7 `give_like` int(11) DEFAULT NULL, 8 PRIMARY KEY (`id`) 9) ENGINE=InnoDB AUTO_INCREMENT=25 DEFAULT CHARSET=utf8mb4;

consolelog

12021-07-16T11:45:58.345798+00:00 app[web.1]: RowDataPacket { 22021-07-16T11:45:58.345798+00:00 app[web.1]: id: 15, 32021-07-16T11:45:58.345799+00:00 app[web.1]: username: 'admin', 42021-07-16T11:45:58.345799+00:00 app[web.1]: icon: '/images/icon.jpg', 52021-07-16T11:45:58.345801+00:00 app[web.1]: password: '〇〇', 62021-07-16T11:45:58.345802+00:00 app[web.1]: email: '〇〇', 72021-07-16T11:45:58.345802+00:00 app[web.1]: give_like: null 82021-07-16T11:45:58.345802+00:00 app[web.1]: } 92021-07-16T11:45:58.345803+00:00 app[web.1]: ] 10

試したこと

配列のキー名変更
データベースのテーブルを再作成

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

res.renderのinfo:results_m

info:results_m[0]

に修正すると表示されました。

投稿2021/07/19 02:29

tuna-kan

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問