Vue.Jsのテーブルのループを列→行に組み替えたい
解決したいこと
Vue.Jsのテーブルのループを列→行に組み替えたい
前回の質問で無事にデータを画面に出すところまではできました。
https://qiita.com/hagetaka/questions/384479692a3e2a669df9
しかしながらテーブルの行列を入れ替えて、レンダリング出力したいと考えています。
現状
現状は下記のように表示できています。
これを下記のようにしたいです。
問題
v-forでループを組む際に、<tr> → <td> で入れ子に回していますが、
これを<td> → <tr> の順にすれば、表の縦横を入れ替えることが出来ないでしょうか？
あとjsonデータ中のkey自体も、<th>のようにヘッダで入れたいと考えています。
これらの仕様はすべて、与えたJSONデータによって、動的に変わるようにしたいと考えています。
keyの並びが勝手にアルファベット順番になってしまうのも、何とかしたいです（これはJSONの性質でしょうか？）
これは解決しました https://stackoverrun.com/ja/q/11896258
CSSで入れ替える案がありました。最悪のときはこれを採用しますが、script側で処理したところです。
https://qiita.com/niyute/items/5f1971013117c5e475fc
flaskからのリストを、二次元配列にして転置し、これをJAVASCRIPT側で処理するのが良さそうな気がしています。
該当するソースコード
Flask側から与えているデータは下記です。
@app.route('/setdata/<question_id>')
def setdata(question_id):
mapios = get_mapios_data(question_id)
result = get_mapios_data("test")
items = [mapios[0],result[0]]
return render_template( 'index.html', items = items, patent_number = question_id)
(Pdb) items
[{'patent_number': 'data', 'BIJ': 'a', 'IPC': 'b', 'FT': 'c', 'ABJ': 'd', 'CLJ': 'e',
'DEJ': 'f', 'FIELD': 'g', 'BACKGROUND': 'h', 'SUBJECT': 'i', 'MEANS': 'j', 'OPERATION': 'k',
'EFFECT': 'l', 'EDJ': 'm', 'DRJ': 'n'},
{'patent_number': 'test', 'BIJ': 'a', 'IPC': 'b', 'FT': 'c', 'ABJ': 'd', 'CLJ': 'e', 'DEJ': 'f',
'FIELD': 'g', 'BACKGROUND': 'h', 'SUBJECT': 'i', 'MEANS': 'j', 'OPERATION': 'k', 'EFFECT': 'l',
'EDJ': 'm', 'DRJ': 'n'}]
Js側で受けたデータは下記です。
items=[
{"ABJ":"d","BACKGROUND":"h","BIJ":"a","CLJ":"e","DEJ":"f","DRJ":"n","EDJ":"m",
"EFFECT":"l","FIELD":"g","FT":"c","IPC":"b","MEANS":"j","OPERATION":"k",
"SUBJECT":"i","patent_number":"data"},{"ABJ":"d","BACKGROUND":"h","BIJ":"a","CLJ":"e","DEJ":"f","DRJ":"n","EDJ":"m",
"EFFECT":"l","FIELD":"g","FT":"c","IPC":"b","MEANS":"j","OPERATION":"k","SUBJECT":"i","patent_number":"test"}
]
{% extends "layout.html" %}
{% block body %}
{{patent_number}}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="content">
<div class="container-fluid">
<h1>公報データ</h1>
<p>
<div id="app">
<mycomp />
</div>
<!-- mycomp7s temlpate -->
{% raw %}
<script type="text/x-template" id="template">
<table border="1">
<tr v-for="(raw,rawi) in item_list" v-bind:key = "rawi">
<td v-for="(cell,celli) in raw" v-bind:key = "rawi * 10 + celli" width = "50" >{{cell}}</td>
</tr>
</table>
</script>
{% endraw %}
<!-- vue script -->
<script>
Vue.config.devtools = true;
d = {{items|tojson|safe}};
Vue.component('mycomp', {
template: '#template',
data:function(){ return {item_list: d }; }
});
new Vue({
el: '#app',
});
</script>
{% endblock %}
0