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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1126閲覧

javascriptで表を作成したい

Uka

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/06/17 10:42

編集2021/06/17 10:51

前提・実現したいこと

websocket経由で送られてきたデータ(実際に送信されるデータセットを下記に記載)をjavascriptで編集操作し、各センサ値を表形式でブラウザに表示したいと考えています。その際、送信されるデータが{x:0.0012, y:0.5}のような形になっているため、これらの値のみ抽出して表に埋め込むための具体的な方法がわかりません。アドバイスいただけましたらありがたいです。よろしくお願いいたします。

表のイメージ

イメージ説明

該当のソースコード(index.htmlの関連する箇所のみ抜粋)

html

1 2<script> 3ws.onmessage = function (msg) { 4 var obj = JSON.parse(msg.data); 5 console.log(obj); //objは189個のデータセット、下記で3つのオブジェクトに分割(グラフにする際に分割する必要) 6 var obj_1 = obj.slice(0,63); //{x:センサAの値, y:センサBの値}のデータセットが63セット 7 var obj_2 = obj.slice(63,126); //{x:センサCの値, y:センサDの値}のデータセットが63セット 8 var obj_3 = obj.slice(126,189); //{x:センサEの値, y:センサDの値}のデータセットが63セット 9 //センサDについては重複して送られてきます 10 var table = document.getElementById("dataTable"); 11 var row = table.insertRow(1); //Add after headings 12 var cell1 = row.insertCell(0); 13 var cell2 = row.insertCell(1); 14 var cell3 = row.insertCell(2); 15 var cell4 = row.insertCell(3); 16 var cell5 = row.insertCel(4); 17 18 cell1.innerHTML = obj.a; 19 cell2.innerHTML = obj.b; 20 cell3.innerHTML = obj.c; 21 cell4.innerHTML = obj.d; 22 cell5.innerHTML = obj.e; 23 24}; 25</script> 26 27<body> 28 <table id="dataTable"> 29 <tr><th>data_A</th><th>data_B</th><th>data_C</th><th>data_D</th><th>data_E</th></tr> 30 </table> 31</body> 32</html> 33 34

JSON形式によるwebsocket送信データ(全部で189個のデータセット)

[{'x': 0.01332, 'y': 0.0017283185840707965}, {'x': 0.01998, 'y': 0.0017097345132743363}, {'x': 0.02664, 'y': 0.0017097345132743363}, {'x': 0.0333, 'y': 0.0017097345132743363},…(省略)… {'x': 52.994170641229495, 'y': 923.6148025572473}, {'x': 40.040040040039976, 'y': 1570.9096900616094}]

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2021/06/17 10:44

・値の取り出し方が分からない ・JavaScriptでテーブルタグが組めない どちらでしょう。 いずれも調べれば出てくる範疇と思いますが、何をどう調べ何を試したのでしょう。
退会済みユーザー

退会済みユーザー

2021/06/17 10:45

169個は189個の間違いですか?(63*3=189)
Uka

2021/06/17 10:50

>m.ts10806さん、 ご返信ありがとうございます。値の取り出し方がわかりません。調べた限りでは、一組のデータセットで取り出す例は見つかったのですが、データセットが配列になっている形で複数のデータセットから値のみ取り出す方法については見当たりませんでした。
Uka

2021/06/17 10:52

>baitokunさん、 ご返信ありがとうございます。ご指摘のとおり、189の間違いでした。修正いたしました。
m.ts10806

2021/06/17 11:16

JSONといっても結局オブジェクトなので、ループ使ってキー参照する形になるかと。 既にmsg.dataのようにされてますし。
guest

回答2

0

ベストアンサー

縦でくるデータを横に表示するという、難しいデータ構造なので、
必ず63レコードが3ブロックの合計189レコードというのを前提としています。

JavaScript

1ws.onmessage = function (msg) { 2 var obj = JSON.parse(msg.data); 3 var obj_1 = obj.slice(0, 63); 4 var obj_2 = obj.slice(63, 126); 5 var obj_3 = obj.slice(126, 189); 6 7 var html = ""; 8 for (var i = 0; i < 63; i++) { 9 var firstBlockRecord = obj_1[i]; 10 var secondBlockRecord = obj_2[i]; 11 var thirdBlockRecord = obj_3[i]; 12 html += ` 13 <tr> 14 <td>${i + 1}</td> 15 <td>${firstBlockRecord.x}</td> 16 <td>${firstBlockRecord.y}</td> 17 <td>${secondBlockRecord.x}</td> 18 <td>${secondBlockRecord.y}</td> 19 <td>${thirdBlockRecord.x}</td> 20 <tr/> 21 `; 22 } 23 var tbody = document.createElement("tbody"); 24 tbody.innerHTML = html; 25 document.querySelector("#dataTable").append(tbody); 26}

投稿2021/06/17 12:55

編集2021/06/17 13:16
root_jp

総合スコア4666

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

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

Uka

2021/06/17 13:58

>root_jpさん、 ご回答くださいましてありがとうございます。こちらのコードで所望の表を作成することができました。大変 助かりました。書き方についても大変参考になります。ありがとうございました。
guest

0

書き下し的にやるとこういう感じですかね (もっと整理の余地はありそう)

js

1ws.onmessage = function (msg) { 2 const obj = JSON.parse(msg.data); 3 const data=[]; 4 for (let j=0; j<3; j++){ 5 data.push( 6 obj.slice(j*63,(j+1)*63).map(e=>e.x), 7 obj.slice(j*63,(j+1)*63).map(e=>e.y) 8 ); 9 } 10 11 const table = document.getElementById("dataTable"); 12 for(let r=0; r<63; r++){ 13 let row = table.insertRow(r+1); //Add after headings 14 row.insertCell(0).innerHTML = r+1; 15 for (let c=0; c<5; c++){ 16 row.insertCell(c+1).innerHTML = data[c][r].toFixed(5); 17 } 18 } 19} 20</script> 21 22<table id="dataTable"> 23<tr><th>No.</th><th>data_A</th><th>data_B</th><th>data_C</th><th>data_D</th><th>data_E</th></tr> 24</table> 25</body>

投稿2021/06/17 11:57

編集2021/06/17 14:03
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問