teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

2019/04/04 11:45

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,113 +1,8 @@
1
+ ```ここに言語を入力
2
+ コード
1
- ### 前提・実現したいこと
3
+ ```### 前提・実現したいこと
2
4
 
3
5
  jQueryを使い、ajaxで取得してきたjsonデータを
4
6
  ・$.each()
5
7
  ・.html()
6
- のメソッドを使って<ul>の中に<li><p></p></li>を追加して表示させたいです。
8
+ のメソッドを使って<ul>の中に<li><p></p></li>を追加して表示させたいです。
7
- appendメソッドは使わずに表示したいです。
8
- いろいろ試してはいるのですが上手く表示できません。
9
-
10
- ### html, jQuery
11
-
12
- ```
13
- <!doctype html>
14
- <html>
15
- <head>
16
- <meta charset="UTF-8">
17
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
18
- <meta name="format-detection" content="telephone=no">
19
- <title>jQuery</title>
20
- <link rel="stylesheet" href="../../common/css/reset.css">
21
- <link rel="stylesheet" href="../../common/css/base.css">
22
- <link rel="stylesheet" href="./css/style.css">
23
- </head>
24
- <body>
25
- <div class="wrapper">
26
- <ul class="colorList"></ul>
27
- </div>
28
- <script src="../../common/js/jquery.js"></script>
29
- <script>
30
-
31
- $(function() {
32
-
33
- $.ajax({
34
- url: './data.json',
35
- type: 'GET',
36
- dataType: 'json'
37
- }).done(function(data) {
38
- var dataArray = data.colorsArray;
39
- $.each(dataArray,function(i) {
40
- var color = dataArray[i].hexValue;
41
- var name = dataArray[i].colorName;
42
- $('.colorList').html('<li class="colorList__item"><p class="colorList__title" style="background-color: ' +color+ ';">' +name+ '</p></li>');
43
- });
44
- });
45
-
46
- });
47
-
48
- // [使うメソッド]
49
- // $.each(配列, function functionName() {}) 配列に対しての繰り返し処理
50
- // .html() 要素の中に引数を代入する。(まずは.append() でやってみましょう)
51
- // $.ajax({}) 外部ファイルやURLに対してデータをリクエストすることができます。これだけだと少しわからないと思うので下に文法を書いておきます。
52
- //
53
- // [文法]
54
- // $.ajax({
55
- // url: './data.json'
56
- // })
57
- // .done(function(data) {
58
- // console.log(data);
59
- // });
60
- //
61
- // 今回の場合は同じ階層にあるdata.jsonに対してリクエストを飛ばして、中にあるオブジェクトを取得します。
62
- // そのオブジェクトは
63
- // .done(function(data) {
64
- // ↑
65
- // ここに入ってきます。
66
- //
67
- // そのため、次の行でconsole.log(data)をすると中身のオブジェクトが確認できます。
68
- //
69
- // [テンプレート]
70
- // <li class="colorList__item">
71
- // <p class="colorList__title" style="background-color: ;"></p>
72
- // </li>
73
- //
74
- // このテンプレートに取得してきた中身を入れて表示します。
75
- </script>
76
- </body>
77
- </html>
78
-
79
- JSON
80
-
81
- {
82
- "colorsArray": [
83
- {
84
- "colorName": "lightblue",
85
- "hexValue": "#ADD8E6"
86
- },
87
- {
88
- "colorName": "lightcoral",
89
- "hexValue": "#F08080"
90
- },
91
- {
92
- "colorName": "lightgreen",
93
- "hexValue": "#90EE90"
94
- },
95
- {
96
- "colorName": "lightsalmon",
97
- "hexValue": "#FFA07A"
98
- },
99
- {
100
- "colorName": "lightskyblue",
101
- "hexValue": "#87CEFA"
102
- },
103
- {
104
- "colorName": "lightpink",
105
- "hexValue": "#FFB6C1"
106
- },
107
- {
108
- "colorName": "lightseagreen",
109
- "hexValue": "#20B2AA"
110
- }
111
- ]
112
- }
113
- ```

2

コードブロック修正

2019/04/04 11:45

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -76,10 +76,8 @@
76
76
  </body>
77
77
  </html>
78
78
 
79
- ```
79
+ JSON
80
80
 
81
- ### JSON
82
-
83
81
  {
84
82
  "colorsArray": [
85
83
  {
@@ -111,4 +109,5 @@
111
109
  "hexValue": "#20B2AA"
112
110
  }
113
111
  ]
114
- }
112
+ }
113
+ ```

1

文章やコード表記に誤りがありました。

2019/03/30 14:27

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,7 @@
4
4
  ・$.each()
5
5
  ・.html()
6
6
  のメソッドを使って<ul>の中に<li><p></p></li>を追加して表示させたいです。
7
+ appendメソッドは使わずに表示したいです。
7
8
  いろいろ試してはいるのですが上手く表示できません。
8
9
 
9
10
  ### html, jQuery
@@ -79,7 +80,7 @@
79
80
 
80
81
  ### JSON
81
82
 
82
- ```{
83
+ {
83
84
  "colorsArray": [
84
85
  {
85
86
  "colorName": "lightblue",