【Thymeleaf】外部ファイルの読み込み【JavaScript】

■やりたいこと
Thymeleafを用いている画面にてlocalで保持している外部ファイルを一括で読み込むこと

Thymeleafで外部ファイルを読み込む際に下記のようにファイルを全て読み込んでいたのですが、
それをscriptを用いて行いたいと考えています。

・・・

■試したこと
下記のスクリプトにて読み込みを行おうとしたのですが、
確認したところ、先頭のbatc2005.json.jsしか取得をすることができませんでした。

JavaScript
1<script>
2var script = document.createElement('script'); 
3var years = [];
4var leags = ["batp","batc"];
5var year = 2005;
6for(i=0;i<2021-year;i++){
7	years[i] = year+i;
8	for(j=0;j<leags.length;j++){
9		script.src = "/json/"+leags[j]+years[i] + ".json.js";
10		document.head.appendChild(script); 
11	}
12}
13
14</script>

また、batc2005.json.jsについても
Chromeの開発者ツールで確認したところ、
ファイルの中身を確認することが出来たのですが、
下記で定義している箇所から、batc2005が未定義だと怒られてしまいます。

vue
1var app = new Vue({
2  el: '#app',
3  data() {	
4    return {
5    items:batc2005,
6    batc2005:batc2005
7    }
8  },
9  methods: {
10    isSelect: function (dataList) {
11      this.items = dataList;
12    }
13  }
14})

batc2005自体は、batc2005.json.js内で定義をしているため、
jsファイルを見に行っていれば、問題ない認識なのですが、、

batc2005.json.js
1batc2005= [
2{"caughtStealing":"7","baseOnBalls":"37","homeRuns":"3","hitByPitch":"5","twoBaseHit":"26","runsScored":"100","onBasePercentage":".387","team":"(ヤ)","totalBases":"245","atBat":"588","hit":"202","stolenBases":"29","threeBaseHit":"4","runBatted":"28","sluggingPercentage":".417","totalPlateAppearance":"649","games":"144","strikeouts":"113","sacrificeFly":"1","sacrificeHit":"18","groundIntoDoublePlay":"5","avarage":".344","intentionalBasesOnBalls":"0","player":"青木　宣親"}
3,
4{"caughtStealing":"5","baseOnBalls":"93","homeRuns":"28","hitByPitch":"1","twoBaseHit":"39","runsScored":"102","onBasePercentage":".430","team":"(中)","totalBases":"304","atBat":"515","hit":"169","stolenBases":"13","threeBaseHit":"6","runBatted":"103","sluggingPercentage":".590","totalPlateAppearance":"612","games":"142","strikeouts":"128","sacrificeFly":"3","sacrificeHit":"0","groundIntoDoublePlay":"8","avarage":".328","intentionalBasesOnBalls":"3","player":"福留　孝介"}
5
6];
7

■追記
上記のスクリプトは一つのhtml内に記載をしております。

html
1player.html
2
3<!DOCTYPE html>
4<html xmlns:th="http://www.thymeleaf.org">
5
6
7<head>
8<link rel="stylesheet" href="css/player.css">
9<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
10<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
11
12<meta charset="UTF-8"/>
13<script>
14
15var years = [];
16var leags = ["batp","batc"];
17var year = 2005;
18for(i=0;i<2021-year;i++){
19	years[i] = year+i;
20	for(j=0;j<leags.length;j++){
21		var script = document.createElement('script'); 
22		script.src = "/json/"+leags[j]+years[i] + ".json.js";
23		document.head.appendChild(script); //<head>に生成
24	}
25}
26
27</script>
28</head>
29<body>
30<h3>選手一覧</h3>
31
32<div>
33<label id="leag">
34  <label><input type="radio" v-model="value" value=batc>セリーグ</label>
35  <label><input type="radio" v-model="value" value=batp>パリーグ</label>
36</label>
37
38<form id="selectDate">
39  <select v-model="selected">
40    <option v-for="(year,index) in list" :key="index":value=year>
41      {{ year }}
42    </option>
43  </select>年
44</form>
45</div>
46<button id="showButton" v-on:click="showPlayers()">検索</button>
47
48<div id="app">
49  <table class="vue_tbl">
50    <thead>
51      <tr id="table_head">
52        <th>項番</th>
53        <th class="player">選手 <span style="font-size: 12px ;width:100%"></span></th>
54        <th>打率 <span style="font-size: 12px"></span></th>
55      </tr>
56    </thead>
57    <tbody>
58      <tr v-for="(item, index) in items">
59        <td>{{ index + 1 }}</td>
60        <td class="strEle">{{ item.player }} {{ item.team }}</td>
61        <td>{{ item.avarage }}</td>     
62      </tr>
63    </tbody>
64  </table>
65</div>
66
67	
68<script>
69var app = new Vue({
70  el: '#app',
71  data() {	
72    return {
73    items:batc2005,
74    batc2005:batc2005
75    }
76  },
77  methods: {
78    isSelect: function (dataList) {
79      this.items = dataList;
80    }
81  }
82})
83
84var leag = new Vue({
85  el: '#leag',
86  data: {
87    value: ''
88  }
89})
90var vm = new Vue({
91  el: '#selectDate',
92  data: {
93    selected: null,
94    list: [],
95    num:100
96  },
97  created(){
98	const year = new Date().getFullYear()
99	for(let i=0;i<=year-2005;i++){
100	  this.list.unshift(year- i)
101	}
102	this.selected=year
103  },
104})
105  
106var showButton = new Vue({
107  el: '#showButton',
108  methods:{
109  	showPlayers:function(){
110      var str = leag.value+vm.selected
111      app.items=app[str];
112  	}
113  }
114});
115
116</script>
117</body>
118
119</html>
120

御教授いただけると幸いです。
よろしくお願いいたします。

m.ts10806

2021/10/01 23:45

>batc2005自体は、batc2005.json.js内で定義をしているため、提示されたコードを見る限り、どこにも定義されているようには見えません。

anko__

2021/10/01 23:51

m.ts10806

2021/10/01 23:53

それぞれのコードのファイル名記載してもらえますか？読み込み順は大事です。

anko__

2021/10/02 02:15

ソースはplayer.htmlに一括で記載をしております。追記しましたので、ご確認よろしくお願いいたします。なんとなくですが、vueのインスタンスのライフサイクル的な問題のような気がしてきました。 (appインスタンスを作成した後に、document.head.appendChild(script);をしている?)

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

回答2件

ブラウザのデバッガーを使って確認してください
何かエラー出ているかもしれません

投稿2021/10/02 00:37

退会済みユーザー

総合スコア0

anko__

2021/10/02 02:03

発生しているエラーは下記2種類になります。いずれも、appインスタンスの中でbatc2005が正常に取得できていないからと思います。また、下記のエラーは「<script th:src="@{/json/batc2005.json.js}"></script>」とベタ書きすることで解消でき、動作も期待している通りになるため、htmlファイルからbatc2005.json.jsを参照することがうまくできていない為と思っています。・[Vue warn]: Error in data(): "ReferenceError: batc2005 is not defined" ・Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

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

本質的な解決にはならないと思いますが、
var script = document.createElement('script');
これがループの外に書いてあるので、実際にheadに追加されるのは現在のコードだと/json/batc2020.json.jsだけになります。（デベロッパツールからHTML確認してください。）

全て追加したいのでしたらfor(j=0;j<leags.length;j++){の中に入れましょう。

投稿2021/10/01 23:57

m.ts10806

総合スコア80861