jqueryでクイズの問題を外部ファイル（json）として読み込みたい。

前提・実現したいこと

jQueryで国語の問題を作ってホームページに載せています。自分で１から作るのは難しくて、ネットのサンプル問題を使わせてもらっています。しかし、問題が増えて、外部ファイルにして読み込もうとして試行錯誤していますが、うまくいきません。
ソースコードは問題を読み込む部分です。
問題の部分をquiz.jsonというファイルにして、スクリプトのaryQuizに格納したいと思います。
getなどを使っていろいろやっていますが、基礎的な知識の不足があり難しいです。どうすれば、うまくくのか教えていただければと思います。よろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

jquery
1
2<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
3<script>
4$(function(){
5    var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
6    var quiz_html = quizArea.html(); //もう一度　を押した時に元に戻すため初期HTMLを変数で保管
7    var quiz_cnt = 0; //現在の問題数を管理
8    var quiz_fin_cnt = 5; //何問で終了か設定（クイズ数以下であること）
9    var quiz_success_cnt = 0; //問題の正解数
10    
11    //クイズの配列を設定
12    var aryQuiz = [];
13    aryQuiz.push(
14
15        {
16             question : '「飛べ　かもめ」の作者はだれですか？',
17            answer : ['杉みき子', '中原中也', '芥川龍之介', '高階杞一']
18        }
19        ,{
20             question : '少年が列車に乗ったときの季節・天気・時間帯は？',
21            answer : ['冬・曇り・昼過ぎ', '冬・曇り・夕方', '冬・晴れ・昼過ぎ', '冬・晴れ・夕方']
22        }
23        ,{
24            question : '少年が家出をした理由は？',
25            answer : ['成績が下がったから', 'ゲームをしすぎて怒られたから', 'おこずかいがもらえないから', '家の手伝いをせずに怒られたから']
26        }
27        ,{
28            question : '列車の窓ガラスに張り付いているように見えた紙切れの正体は？',
29            answer : ['かもめ', 'プリント', 'はと', '虫']
30        }
31        ,{
32            question : '最後の場面で、少年の心に芽生えたものとして当てはまるものは？',
33               {
34             question : '「飛べ　かもめ」の作者はだれですか？',
35            answer : ['杉みき子', '中原中也', '芥川龍之介', '高階杞一']
36        }
37     answer : ['前向きな思い', '諦め', '競争心', '自由を求める心']
38        }
39    );
40    
41    quizReset();
42    
43
44//以降省略します。
45
46quiz.jsonファイルは上記スクリプトの中の
47        {
48             question : '「飛べ　かもめ」の作者はだれですか？',
49            answer : ['杉みき子', '中原中也', '芥川龍之介', '高階杞一']
50        }
51
52の内容です。
53以下のようなことをしていますが、基礎的な知識不足のため難しいです。
54
55
56<!DOCTYPE html>
57<html>
58<head>
59<meta http-equiv="content-type" charset="UTF-8">
60<meta name="viewport" content="width=device-width,initial-scale=1.0">
61<title>国語クイズ</title>
62</head>
63
64<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
65
66<body>
67
68<script>
69
70$(function(){
71    var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
72    var quiz_html = quizArea.html(); //もう一度　を押した時に元に戻すため初期HTMLを変数で保管
73    var quiz_cnt = 0; //現在の問題数を管理
74    var quiz_fin_cnt = 5; //何問で終了か設定（クイズ数以下であること）
75    var quiz_success_cnt = 0; //問題の正解数
76    
77    //クイズの配列を設定
78    var aryQuiz = [];
79
80    $.getJSON('quiz.json' , (data) => {
81    aryQuiz.push(data);
82    console.log(aryQuiz);
83
84    });
85
86
87</body>
88</html>
89

試したこと

上記のようなことをしてみましたが、基礎的な知識不足のためうまくいきません。

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

データは同じサーバーの同じ場所に置いています。

kei344

2020/05/05 05:01

「console.log(aryQuiz);」はどうなりましたか？

eneko0513

2020/05/05 05:20

プッシュされている構造がおかしいようですがここは修正されていますか？ ,{ question : '最後の場面で、少年の心に芽生えたものとして当てはまるものは？', { question : '「飛べ　かもめ」の作者はだれですか？', answer : ['杉みき子', '中原中也', '芥川龍之介', '高階杞一'] } answer : ['前向きな思い', '諦め', '競争心', '自由を求める心'] }

eneko0513

2020/05/05 05:29

もしかしたらローカルのJSONアクセスはCORSがあるため理想通りにはいかないかもしれません。 https://qiita.com/knygyg/items/4be78442b019796d9dcc

miyabi_pudding

2020/05/05 05:57

> うまくいきません。何がどううまく行っていないのか記載お願いします。コンソールにエラーが出てるなら、そのエラー文を、記載してください。

m.ts10806

2020/05/05 06:22

＞問題が増えていっそサーバーサイトでDBにされては

tsusan

2020/05/05 06:46

コンソール画面には何もでてきませんでした。

miyabi_pudding

2020/05/05 06:48

であれば、何がどう上手くいかないんですか？

eneko0513

2020/05/05 06:52

問題を整理しましょう。ぱっと見た感じで思う問題点・aryQuiz.push()の中のjsonデータ自体が壊れていますので元のjsonテキストは正しいかまず確認してください。・下の方のscriptタグが閉じきっていないのと$(function()が閉じきっていません　その旨のコンソールエラーがまず出ますよね。

tsusan

2020/05/05 07:10

コンソール画面には onMessage extension ial.js:425 Clean the cache of the scraper (new onComplete event) と出て、あとは何もでてきません。

miyabi_pudding

2020/05/07 04:26

コンソールはわかりました。何度も聞いていますが、 "何がどう上手くいかない"んですか？ "どこにどう問題が起きている"のでしょうか？問題文がブラウザ画面に表示されないとか、変数に、意図した構造のデータが入らない、とか、そう言ったことを聞いております。つまり、理想の挙動はこうで、現状はこういう挙動になってしまっている、といった、具体的な問題を提示して欲しいんです。上手くいかない、だけだと、どうなってほしいのか、それに対してどういう状態なのか、わからず、第三者にはちんぷんかんぷんで、回答しようがないんです。

tsusan

2020/05/09 07:57

返事が遅くなって申し訳ありません。aryQuiz.pushの部分でaryQuizに、あとのデータの部分を外部ファイルにして入るようにしたいのですが、入らないのでどうしたらいいのかと悩んでいるところです。わかりにくくてすみません。

eneko0513

2020/05/09 11:10

とりあえず現状のソースコードとjsonの中身をそれぞれ「追記」してみてはいかがでしょうか。 ※既存のソースはそれはそれで残しておいてほしいので追記のご依頼です。

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

回答1件

	$.ajax({
		url: '～/quiz.json',
		type: 'GET',
		dataType: 'text'}).always( function( data, textStatus, errorThrown ){
			switch(textStatus){
				case 'success' :
					aryQuiz.push(JSON.parse(data))
					console.log(aryQuiz) ;
					break ;
				case 'error' :
					break ;
			}
		}) ;

にて取得できるかと、
ただ、クイズとしては。。。ですよね
また取得するJSONの文法も注意してください

投稿2020/05/07 01:06