JavaScript 配列データをrowspanをいれた表で表示するよりよい方法

Question

以下のようなデータがあり、これを、同一カラム内で同じ内容のセルは結合して表示したいと考えました。
（便宜上表の一区画をセルと表現します）

var data = [
  { city: "関東", pref: "東京" },
  { city: "関東", pref: "千葉" },
  { city: "関東", pref: "神奈川" },
  { city: "関東", pref: "埼玉" },
  { city: "中部", pref: "名古屋" },
  { city: "近畿", pref: "大阪" },
  { city: "近畿", pref: "京都" }
]

目標は以下のような表です。
（関東や近畿の下のセルは、rowspanで結合されていたいのですが、
teratail ですと、セルの結合表示ができません・・・）

city	pref
関東	東京
	千葉
	神奈川
	埼玉
中部	名古屋
近畿	大阪
	京都

ネット検索してみましたら、結合前の表をhtmlで作成、後からjQueryを使って結合するなどのライブラリがありましたが、
少しでも速度が早いほうが、、とデータを前処理する以下のやり方をとりました。

やってみたこと

まず、データをrowspanで処理しやすいように以下のようにすることを目標にしました。

var data = [
  { city: ["関東",4] pref: "東京" },
  { pref: "千葉" },
  { pref: "神奈川" },
  { pref: "埼玉" },
  { city: ["中部",1], pref: "名古屋" },
  { city: ["近畿",2], pref: "大阪" },
  { city: pref: "京都" }
]

そのために、以下のコードを書きました。

var c = 0
data.forEach((d, i) => {
  if (i + 1 === data.length || data[i].city !== data[i + 1].city) {
    if (c > 0) {
      for (t = 0; t < c; t++) { delete data[i - t].city }
      data[i - c].city = [data[i - c].city, c + 1]
      c = 0
      return
    } else {
      data[i].city = [data[i].city, 1]
    }
  }
  if (data[i].city === data[i + 1].city) {
    c++
  }
})

そして、最後にjQueryを用いて以下のようにしました。

data.forEach(function (d) {
  var row = `<tr>`
  if (d.city)
    var row_city = `<th rowspan="${ d.city[1] }" >${ d.city[0] }</th>`
  else
    var row_city = ``
    var row_pref = `<td>${ d.pref }</td>`
    var row_end = `</tr>`
    var row_mixed = row + row_city + row_pref + row_end
$("#testTable").append(row_mixed)
})

現実の実装では、カラムも複数あり、上のようなやり方でよいのか不安です。
よりよい方法（コード）などありましたら、ご教示いただけませんでしょうか。

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

Answer 1

こんにちは

よりよい方法（コード）

といえるかどうかは分かりませんが、テーブル用のデータを作成しない方法を考えました。

["関東", "中部", "近畿"] という配列 cities を作り、これをループさせて、各city に該当するdataの要素を filter で取得して、その該当数を rowSpan として使います。

以下この考え方によるコードです。

var cities = data.reduce((a, e) => a.includes(e.city) ? a : [...a, e.city], [])

cities.forEach(city => {

  const rows = data.filter(e => e.city === city)
                   .map((e,i,self) => 
                       $('<tr>')
                           .append(i === 0 ? $('<td>').attr('rowSpan', self.length).text(city) : null)
                           .append($('<td>').text(e.pref))
         　　　　　　)
  
  $('table').append(rows)
})

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/PowWbqO?editors=0010

参考になれば幸いです。

Comments

[orori]

jquery の記述も関数をつかってここまで簡潔になるとは、びっくりしました。
自らつかえるよう、記述を真似してゆきたいと思います。
お二人とも学ぶべき点が多く、ただ先に回答いただいたという理由でこちらをベストとさせていただきます。
ありがとうございました！

[jun68ykt]

どういたしまして。
> ここまで簡潔になるとは、びっくりしました。
とのことで、よかったです????

Answer 2

調子悪くて回答がアップできません

Comments

[yambejp]

<script>
var a = [
{ city: "関東", pref: "東京" },
{ city: "関東", pref: "千葉" },
{ city: "関東", pref: "神奈川" },
{ city: "関東", pref: "埼玉" },
{ city: "中部", pref: "名古屋" },
{ city: "近畿", pref: "大阪" },
{ city: "近畿", pref: "京都" }
]
var b = a.map(x=>[[x.city,1],[x.pref,1]]);
for(i=b.length-1;i>0;i--){
if(b[i][0][0]==b[i-1][0][0]){
b[i-1][0][1]+=b[i][0][1];
b[i][0]=null;
}
}
window.addEventListener('DOMContentLoaded', ()=>{
b.forEach(x=>{
var tr=document.createElement('tr');
document.querySelector('#t1 tbody').appendChild(tr);
x.forEach(y=>{
if(y!==null){
var td=Object.assign(document.createElement('td'),{
textContent:y[0]
});
if(y[1]>1) td.setAttribute("rowspan",y[1]);
tr.appendChild(td);
}
});
});
});
</script>
<table id="t1" border>
<thead>
<tr><th>city</th>
<th>pref</th>
</thead>
<tbody>
</tbody>
</table>

[orori]

配列でつくったユニットをもとに作られており、応用がききますね。
今回わたくしも同じ方法を行おうとしましたが、できなかったので大変参考になりました。
またjQueryを使わなくても簡潔にかけるのも勉強になります。
使えるようになるまで、何度も読み返したいと思います。ありがとうございました！