teratail
回答率
85.49%
質問するログイン新規登録
トップに関する質問jqeryでurlを取得し URLにマッチした場合配列でJSONデータをhtmlに書き出す

編集履歴

質問編集履歴

10

syuusei

2018/06/21 08:35

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- ```
37
+ ```js
38
38
 
39
39
  <script>
40
40
 
@@ -104,19 +104,39 @@
104
104
 
105
105
  </script>
106
106
 
107
+
108
+
107
109
  <div id="Area"></div>
108
110
 
109
111
 
110
112
 
111
-
112
-
113
-
114
-
115
- jsonファイル
116
-
117
- ```
113
+ ```
114
+
118
-
115
+ ```css
116
+
117
+ <style>
118
+
119
+ #Area {
120
+
121
+ display: none;
122
+
123
+ }
124
+
125
+
126
+
127
+ </style>
128
+
129
+
130
+
119
- ```{
131
+ ```
132
+
133
+ ```json
134
+
135
+
136
+
137
+
138
+
139
+ {
120
140
 
121
141
  "area1":[
122
142
 

9

syusei

2018/06/21 08:35

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -46,11 +46,11 @@
46
46
 
47
47
  if(document.URL.match(url)) {
48
48
 
49
- $('#hoge').show();
49
+ $('#Area').show();
50
50
 
51
51
  } else{
52
52
 
53
- $('#hoge').hide();
53
+ $('#Area').hide();
54
54
 
55
55
  }
56
56
 
@@ -104,7 +104,7 @@
104
104
 
105
105
  </script>
106
106
 
107
-
107
+ <div id="Area"></div>
108
108
 
109
109
 
110
110
 

8

修正

2018/06/21 08:31

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,22 @@
10
10
 
11
11
  配列と組み合わせる方法がわかりません。
12
12
 
13
+
14
+
15
+ ■URL取得
16
+
17
+ url取得⇒hogeの場合htmlの#Area表示
18
+
19
+
20
+
21
+ ■jsonデータをhtmlに書き出し
22
+
23
+ urlがhogeの場合⇒jsonからarea1のjsonデータ取得⇒htmlの#Areaにレンダリング
24
+
25
+
26
+
27
+ わかりずらく申し訳ないですが、
28
+
13
29
  組み合わせる方法をアドバイスいただけませんか。
14
30
 
15
31
  よろしくお願いします。

7

修正

2018/06/21 08:27

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -138,7 +138,7 @@
138
138
 
139
139
  "img" : "https://"
140
140
 
141
- },
141
+ }
142
142
 
143
143
 
144
144
 

6

修正

2018/06/21 05:45

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  "mail": "hanako@example.com",
138
138
 
139
- "img" : "https://
139
+ "img" : "https://"
140
140
 
141
141
  },
142
142
 
@@ -144,7 +144,7 @@
144
144
 
145
145
  ],
146
146
 
147
- area2":[
147
+ "area2":[
148
148
 
149
149
  {
150
150
 
@@ -166,7 +166,7 @@
166
166
 
167
167
  "mail": "tanaka@example.com",
168
168
 
169
- "img" : "https://w"
169
+ "img" : "https://"
170
170
 
171
171
  },
172
172
 

5

修正

2018/06/21 05:44

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -102,7 +102,7 @@
102
102
 
103
103
  ```{
104
104
 
105
- "area":[
105
+ "area1":[
106
106
 
107
107
  {
108
108
 
@@ -124,7 +124,9 @@
124
124
 
125
125
  "mail": "tanaka@example.com",
126
126
 
127
- "img" : "https:/
127
+ "img" : "https:/"
128
+
129
+ },
128
130
 
129
131
  {
130
132
 
@@ -136,7 +138,7 @@
136
138
 
137
139
  "img" : "https://
138
140
 
139
- }
141
+ },
140
142
 
141
143
 
142
144
 
@@ -182,9 +184,7 @@
182
184
 
183
185
  ]
184
186
 
185
- }
186
187
 
187
- コード
188
188
 
189
189
  ```
190
190
 

4

修正

2018/06/21 05:39

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  URLにマッチした場合配列でJSONデータをhtmlに書き出す
4
4
 
5
- ---
5
+
6
6
 
7
7
 
8
8
 
@@ -98,6 +98,8 @@
98
98
 
99
99
  jsonファイル
100
100
 
101
+ ```
102
+
101
103
  ```{
102
104
 
103
105
  "area":[
@@ -182,6 +184,8 @@
182
184
 
183
185
  }
184
186
 
185
-
187
+ コード
186
188
 
187
189
  ```
190
+
191
+ ```

3

追記

2018/06/21 05:34

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,9 @@
10
10
 
11
11
  配列と組み合わせる方法がわかりません。
12
12
 
13
+ 組み合わせる方法をアドバイスいただけませんか。
13
14
 
15
+ よろしくお願いします。
14
16
 
15
17
 
16
18
 
@@ -180,6 +182,6 @@
180
182
 
181
183
  }
182
184
 
183
- コード
185
+
184
186
 
185
187
  ```

2

修正

2018/06/21 05:31

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -1,16 +1,8 @@
1
- ### 前提・実現したいこと
2
-
3
-
4
-
5
- ここに質問の内容を詳しく書いてください。
6
-
7
1
  jqeryでurlをlocationで取得し
8
2
 
9
3
  URLにマッチした場合配列でJSONデータをhtmlに書き出す
10
4
 
11
-
12
-
13
- ### 発生している問題・エラーメッセージ
5
+ ---
14
6
 
15
7
 
16
8
 
@@ -18,15 +10,13 @@
18
10
 
19
11
  配列と組み合わせる方法がわかりません。
20
12
 
21
- ```
22
-
23
- エラーメッセージ
24
-
25
- ```
26
13
 
27
14
 
28
15
 
16
+
17
+
18
+
29
- ### 該当のソースコード
19
+ ```
30
20
 
31
21
  <script>
32
22
 
@@ -96,27 +86,17 @@
96
86
 
97
87
  </script>
98
88
 
99
- ```ここに言語名を入力
100
-
101
- ソースコード
102
-
103
- ```
104
89
 
105
90
 
106
91
 
107
- ### 試したこと
108
92
 
109
93
 
110
94
 
111
- ここに問題に対して試したことを記載してください。
112
95
 
113
-
114
-
115
- ### 補足情報（FW/ツールのバージョンなど）
116
96
 
117
97
  jsonファイル
118
98
 
119
- {
99
+ ```{
120
100
 
121
101
  "area":[
122
102
 
@@ -200,4 +180,6 @@
200
180
 
201
181
  }
202
182
 
203
- ここにより詳細な情報を記載してください。
183
+ コード
184
+
185
+ ```

1

コメント追加

2018/06/21 05:28

投稿

Lustill
Lustill

スコア7

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,8 @@
30
30
 
31
31
  <script>
32
32
 
33
+ //url取得
34
+
33
35
  var url = location.pathname;
34
36
 
35
37
  $(document).ready(function(){
@@ -46,7 +48,11 @@
46
48
 
47
49
  });
48
50
 
49
-
51
+ //url取得
52
+
53
+
54
+
55
+ //html書き出し
50
56
 
51
57
  $(function () { 
52
58
 
@@ -86,7 +92,7 @@
86
92
 
87
93
  });
88
94
 
89
-
95
+ //html書き出し
90
96
 
91
97
  </script>
92
98