JSRA　データ変換

実現したいこと

JRAのCMはなぜ競馬場に観客がいるんのですか？
今、競馬は無観客競馬だと思いますが、
G1レースを宣伝するJRAのテレビCMを観てると、競馬場に観客が大勢いて、
盛り上がっています。
これを観た人は、競馬場は大勢人が集まってるんだ！と勘違いしてしまわないでしょうか？

画面に「現在、競馬場は無観客中です」のようなテロップが必要なのでは？

Zuishin

2020/09/12 21:51

https://teratail.com/questions/291030 副アカウントで質問するのではなく、こちらの質問を解決してください。

Zuishin

2020/09/13 08:07

向こう退会したのか。

think49

2020/09/13 08:43

https://teratail.com/questions/history-questions/290990 https://teratail.com/questions/history-questions/291030 履歴に証拠が残ってますが、「不快になった」から退会したようです。回答者の「不快」は度外視する方針なのでしょう。

Zuishin

2020/09/13 09:25

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13231420133 ついでにこれも。

この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。

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

回答3件

回答ではないです。

JSONデータを取得して、それをHTMLに直してからdesignの変数の中に入れたい。

これは、XSS を可能とする操作なので、使用箇所によっては脆弱性につながります。
HTML として文字列を作るのではなく、適切な DOM 操作関数を使用してくみ上げることをオススメします。

投稿2020/09/12 21:37

退会済みユーザー

総合スコア0

例示のものはdataをforで回している意味がないですね

javascript
1$(function(){
2  $.getJSON("data.json", function(data) {
3    console.log(data);
4    var list=[
5      data.sample,
6      data.text.sample1,
7      data.text.sample1,
8      data.text.sample1,
9      data.text.sample1,
10      data.text.sample1,
11      data.text.sample1,
12      data.text.sample1,
13      data.text.sample1,
14      data.text.sample1,
15      data.text.sample1,
16      data.text.sample1,
17      data.text.sample1,
18      data.text.sample1,
19      data.hoge.name.id.sample9,
20      data.hoge.name.id.sample9,
21      data.hoge.name.id.sample9,
22      data.hoge.name.id.sample10,
23      data.hoge.name.id.sample10,
24      data.hoge.name.id.sample10,
25      ];;
26    var design = `
27<table>
28<tr>
29<td>%s</td>
30<td>%s</td>
31</tr>
32<tr>
33<td rowspan="2">%s<br>%s<br>%s</td>
34<td>%s<br>%s<br>%s</td>
35</tr>
36<tr>
37<td>%s<br>%s<br>%s</td>
38</tr>
39<tr>
40<td rowspan="2">%s<br>%s<br>%s</td>
41<td>%s<br>%s<br>%s</td></td>
42</tr>
43<tr>
44<td>%s<br>%s<br>%s</td></td>
45</tr>
46</table>`;
47    design=design.replace(/%s/g,x=>list.shift());
48    console.log(design);
49  });
50});

投稿2020/09/13 03:50

yambejp

総合スコア118632

handlebarsのようなシンプルなJavascriptテンプレートエンジンを導入してみては如何でしょうか。

上記のサンプルであれば以下のような形になり、苦労がそれほどない割にはスッキリすると思います。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
8    <title>Document</title>
9</head>
10<body>
11    <div id="test"></div>
12   <script>
13       function getData() {
14        var data = {
15            "sample": "サンプル",
16            "text": {
17                "sample1": "サンプル1",
18                "sample2": "サンプル2"
19            },
20            "info": {
21                "sample3": "サンプル3",
22                "sample4": "サンプル4"
23            },
24            "num": {
25                "sample5": "サンプル5",
26                "sample6": "サンプル6",
27                "sample7": "サンプル7"
28            },
29            "hoge": {
30                "sample8": "サンプル8",
31                "name": {
32                "id": {
33                    "sample9": "サンプル9",
34                    "sample10": "サンプル10"
35                }
36                }
37            }
38        }
39        return data;           
40       }
41
42   $(document).ready(function() {
43        var data = getData();
44        var template = Handlebars.compile($("#js_template").html());
45        var html = template(data);  // テンプレートに値が埋め込まれたHTML
46        $("#test").html(html);   // HTMLをセット
47    });
48    </script>
49    <!-- テンプレート部分 -->
50    <div style="display:none" id="js_template">
51        <table><tr><td> {{ sample}}
52        </td><td> {{ text.sample1}}
53        </td></tr><tr><td rowspan="2"> {{ text.sample1}}
54        <br> {{ text.sample1}}
55        <br> {{ text.sample1}}
56        </td><td> {{ text.sample1}}
57        <br> {{ text.sample1}}
58        <br> {{ text.sample1}}
59        </td></tr><tr><td> {{ text.sample1}}
60        <br> {{ text.sample1}}
61        <br> {{ text.sample1}}
62        </td></tr><tr><td rowspan="2"> {{ text.sample1}}
63        <br> {{ text.sample1}}
64        <br> {{ text.sample1}}
65        </td><td> {{ hoge.name.id.sample9}}
66        <br> {{ hoge.name.id.sample9}}
67        <br> {{ hoge.name.id.sample9}}
68        </td></tr><tr><td> {{ hoge.name.id.sample10}}
69        <br> {{ hoge.name.id.sample10}}
70        <br> {{ hoge.name.id.sample10}}
71        </td></tr></table>
72    </div>
73</body>
74</html>