javascriptで表を作成したい

前提・実現したいこと

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個のデータセット、下記で３つのオブジェクトに分割(グラフにする際に分割する必要)
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/ツールのバージョンなど）

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

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のようにされてますし。

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

回答2件

ベストアンサー

縦でくるデータを横に表示するという、難しいデータ構造なので、
必ず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さん、ご回答くださいましてありがとうございます。こちらのコードで所望の表を作成することができました。大変　助かりました。書き方についても大変参考になります。ありがとうございました。

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

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

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>