JavaScriptでリストの中身をとりだしたい

プログラミングをはじめて2ヶ月の者です。

WebSocketをつかってチャットアプリを作成しています。
クライアントから送信されたメッセージをデータベースを経由して受信する、というようにしたのですが、表示でつまずいています。

データベースから取得する際にList型で取得しているため表示がメッセージ1,メッセージ2,メッセージ3..... というようにリストの形での表示になってしまっています。

これをメッセージ単位で表示したいのですが、jsでの取り出し方が調べてもわからず苦戦しています。

html
1
2<!DOCTYPE html>
3 <html>
4
5	<head>
6		
7〜略〜
8<script>
9        function connect() {
10            var socket = new SockJS('chatPage'); // WebSocketに接続
11            stompClient = Stomp.over(socket);
12            stompClient.connect({}, function (frame) {
13                setConnected(true);
14                console.log('Connected: ' + frame);
15                stompClient.subscribe('/topic/greetings', function (greeting) { 
16            showGreeting(JSON.parse(greeting.body).content);
17                });
18            });
19        }
20
21        function sendMessage() {
22            var message = document.getElementById('message').value;
23            stompClient.send("/app/chatPage", {}, JSON.stringify({'message': message})); // メッセージの送信
24        }
25
26		function showGreeting(message) {
27            var response = document.getElementById('response');
28            var p = document.createElement('p');
29           p.style.wordWrap = 'break-word';
30         p.appendChild(document.createTextNode(message));
31            response.appendChild(p);
32       }
33      }
34		
35    </script>
36</head>
37
38<body onload="connect();">
39
40		<header>
41		</header>	
42		
43		<div class="chatspace" >
44			<p id="response"></p>
45		</div>
46
47		<footer>
48			<table>
49				<tr>
50					<form >	
51						<td><textarea id="message"  type="text" maxlength="90"></textarea></td>
52						<td><button id="send" onclick="sendMessage();">送信</button></td>
53					</form>
54				</tr>
55			</table>
56		</footer>
57	</body>
58</html>
59

function showGreetingの中を書き換えればいいのかなと思い色々と試しましたが、うまくいきませんでした。

メッセージは全件取得したいので、List型を変えることはできません。

よろしくお願いいたします。

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

回答2件

色々と試したというのは、何を試されましたか？

List型というのがどういうことなのかよくわからないですが、showGreetingの引数messageが単純にカンマ区切りの文字列になっているのなら、splitでカンマで分割して配列にすれば良いのでは？と思います。

JavaScript split 文字列を配列にする | ITSakura

（追記）
messageがそもそも配列であるのなら、nobkzさんの回答のとおりループで処理させるべし、ということになりますね。

投稿2021/06/12 16:24

編集2021/06/12 16:27

itagagaki

総合スコア8402

ベストアンサー

おそらくList型ではなく、Array型（配列型）です。

見てみると、このところでsubscribeして、データ受け取り、showGreetingに流しているように思います。

js
1stompClient.subscribe('/topic/greetings', function (greeting) {
2   showGreeting(JSON.parse(greeting.body).content);
3});

このとき、JSON.parse(greeting.body).contentがArray型になっているので、結果表示がカンマ区切りのメッセージになっているのだと、推測しています。

この推測が正しければ、配列の中のデータをループして表示すればいいだけです。コードとしては、普通にfor文をつかって

js
1stompClient.subscribe('/topic/greetings', function (greeting) {
2   let messages = JSON.parse(greeting.body).content; // メッセージ（文字列）のArray型
3   // ループして表示
4   for(let message of messages ){
5     showGreeting(message);
6   }
7});

もしくは、Array型のforEachを使って、ループさせればいいでしょう。

js
1stompClient.subscribe('/topic/greetings', function (greeting) {
2   let messages = JSON.parse(greeting.body).content; // メッセージ（文字列）のArray型
3   // ループして表示
4   messages.forEach(showGreeting);
5});