teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問vue.js 受け取ったjsonデータをcreatedで加工したい

編集履歴

質問編集履歴

23

修正その２

2018/11/24 10:00

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -232,9 +232,9 @@
232
232
 
233
233
  # 解決したソース
234
234
 
235
- - computedのメソッドをreturn文を修正しました。
235
+ - computedのメソッドkakou_postsのreturn文の記述を修正しました。
236
-
236
+
237
- - 修正はしておりませんが、補足として、getPostsは非同期処理でjson情報を取得します。取得完了後にdataのpostsに格納されます。
237
+ - 補足説明として、getPostsは非同期処理でjson情報を取得します。取得完了後にdataのpostsに格納されます。
238
238
 
239
239
  その後computedのkakou_postsがリアクティブ（この場合はpostsが空からjson情報がセットされたということ）を感知して、kakou_posが発動します。
240
240
 

22

解答を修正しました。18年11月24日

2018/11/24 09:59

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -232,6 +232,14 @@
232
232
 
233
233
  # 解決したソース
234
234
 
235
+ - computedのメソッドをreturn文を修正しました。
236
+
237
+ - 修正はしておりませんが、補足として、getPostsは非同期処理でjson情報を取得します。取得完了後にdataのpostsに格納されます。
238
+
239
+ その後computedのkakou_postsがリアクティブ（この場合はpostsが空からjson情報がセットされたということ）を感知して、kakou_posが発動します。
240
+
241
+ -
242
+
235
243
 
236
244
 
237
245
  ```javascript
@@ -240,17 +248,19 @@
240
248
 
241
249
  el:'#wrapper',
242
250
 
243
- data: {
251
+ data() {
252
+
244
-
253
+ return {
254
+
245
- msg:'メッセ',
255
+ msg: "メッセ",
246
-
247
- kakou_posts:[],
256
+
248
-
249
- posts: []
257
+ posts: []
258
+
250
-
259
+ };
260
+
251
- },
261
+ },
252
-
262
+
253
- created: function(){
263
+ created: function() {
254
264
 
255
265
  this.getPosts();
256
266
 
@@ -258,47 +268,51 @@
258
268
 
259
269
  methods: {
260
270
 
261
- getPosts: function(){
271
+ getPosts: function() {
272
+
262
-
273
+ axios
274
+
275
+ .get(
276
+
263
- axios.get( 'http://example.com/wp-json/wp/v2/news/?_embed&per_page=7' )
277
+ "https://cooperativehouse.jp/wp-json/wp/v2/news/?_embed&per_page=7"
278
+
264
-
279
+ )
280
+
265
- .then( response => {
281
+ .then(response => {
266
-
282
+
267
- this.posts = response.data;
283
+ this.posts = response.data;
268
-
269
-
270
-
271
- for(var i = 0; i < this.posts.length; i++ ){
284
+
272
-
273
- let moto = this.posts[i].date
274
-
275
- setting = new Date(moto);
276
-
277
-
278
-
279
- this.kakou_posts.push({
280
-
281
- yy : setting.getFullYear(),
282
-
283
- mm : (setting.getMonth() + 1),
284
-
285
- dd : setting.getDate()
286
-
287
- })
285
+ })
286
+
288
-
287
+ .catch(error => {
288
+
289
+ window.alert(error);
290
+
291
+ });
292
+
289
- }
293
+ }
290
-
291
- return this.kakou_posts
294
+
292
-
293
- } )
294
-
295
- .catch( error => {
296
-
297
- window.alert( error );
298
-
299
- } );
300
-
301
- },
295
+ },
296
+
297
+ computed: {
298
+
299
+ //console.log(posts.length())
300
+
301
+ kakou_posts: function() {
302
+
303
+ const kakou_posts = [];
304
+
305
+ for (var i = 0; i < this.posts.length; i++) {
306
+
307
+ let date = this.posts[i].date;
308
+
309
+ kakou_posts.push(date);
310
+
311
+ }
312
+
313
+ return kakou_posts;
314
+
315
+ }
302
316
 
303
317
  }
304
318
 
@@ -314,28 +328,26 @@
314
328
 
315
329
 
316
330
 
317
- <!-- <p><input v-model="msg"></p> -->
318
-
319
-
320
-
321
331
  <div class="contents">
322
332
 
323
333
  <transition name="fade" mode="out-in">
324
334
 
325
- <div class="page page--home"><br>
335
+ <div class="page page--home">
326
-
336
+
327
- <h2>ここはホームです、一覧表示させます。{{ msg }}。<h2>
337
+ <h2>ここはホームです、一覧表示させます。{{ msg }}。</h2>
328
338
 
329
339
  <ul>
330
340
 
331
- <li v-for="(post, index) in posts">
341
+ <li v-for="(post,index) in posts" :key="index">
332
-
342
+
333
- {{post.title.rendered}}
343
+ <h3><a :href="post.link" target="_blank">{{post.title.rendered}}</a></h3>
334
-
344
+
335
- {{ kakou_posts[index].yy }}/{{ kakou_posts[index].mm }}/{{ kakou_posts[index].dd }}
345
+ <p><time>{{ kakou_posts[index] }}</time></p>
336
346
 
337
347
  <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url">
338
348
 
349
+ <hr>
350
+
339
351
  </li>
340
352
 
341
353
  </ul>

21

ff

2018/11/24 09:58

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -260,7 +260,7 @@
260
260
 
261
261
  getPosts: function(){
262
262
 
263
- axios.get( 'http://026.test55.net/wp-json/wp/v2/news/?_embed&per_page=7' )
263
+ axios.get( 'http://example.com/wp-json/wp/v2/news/?_embed&per_page=7' )
264
264
 
265
265
  .then( response => {
266
266
 

20

dd

2018/02/23 04:26

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -305,3 +305,49 @@
305
305
  })
306
306
 
307
307
  ```
308
+
309
+
310
+
311
+ ```html
312
+
313
+ <div id="wrapper">
314
+
315
+
316
+
317
+ <!-- <p><input v-model="msg"></p> -->
318
+
319
+
320
+
321
+ <div class="contents">
322
+
323
+ <transition name="fade" mode="out-in">
324
+
325
+ <div class="page page--home"><br>
326
+
327
+ <h2>ここはホームです、一覧表示させます。{{ msg }}。<h2>
328
+
329
+ <ul>
330
+
331
+ <li v-for="(post, index) in posts">
332
+
333
+ {{post.title.rendered}}
334
+
335
+ {{ kakou_posts[index].yy }}/{{ kakou_posts[index].mm }}/{{ kakou_posts[index].dd }}
336
+
337
+ <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url">
338
+
339
+ </li>
340
+
341
+ </ul>
342
+
343
+ </div>
344
+
345
+ </transition>
346
+
347
+ </div><!--//contents -->
348
+
349
+
350
+
351
+ </div><!--//wrapper -->
352
+
353
+ ```

19

ええ

2018/02/23 04:24

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -225,3 +225,83 @@
225
225
 
226
226
 
227
227
  vue.jsとjavascriptに詳しい方がいらっしゃいましたらご教示お願い致します。
228
+
229
+
230
+
231
+
232
+
233
+ # 解決したソース
234
+
235
+
236
+
237
+ ```javascript
238
+
239
+ var app = new Vue({
240
+
241
+ el:'#wrapper',
242
+
243
+ data: {
244
+
245
+ msg:'メッセ',
246
+
247
+ kakou_posts:[],
248
+
249
+ posts: []
250
+
251
+ },
252
+
253
+ created: function(){
254
+
255
+ this.getPosts();
256
+
257
+ },
258
+
259
+ methods: {
260
+
261
+ getPosts: function(){
262
+
263
+ axios.get( 'http://026.test55.net/wp-json/wp/v2/news/?_embed&per_page=7' )
264
+
265
+ .then( response => {
266
+
267
+ this.posts = response.data;
268
+
269
+
270
+
271
+ for(var i = 0; i < this.posts.length; i++ ){
272
+
273
+ let moto = this.posts[i].date
274
+
275
+ setting = new Date(moto);
276
+
277
+
278
+
279
+ this.kakou_posts.push({
280
+
281
+ yy : setting.getFullYear(),
282
+
283
+ mm : (setting.getMonth() + 1),
284
+
285
+ dd : setting.getDate()
286
+
287
+ })
288
+
289
+ }
290
+
291
+ return this.kakou_posts
292
+
293
+ } )
294
+
295
+ .catch( error => {
296
+
297
+ window.alert( error );
298
+
299
+ } );
300
+
301
+ },
302
+
303
+ }
304
+
305
+ })
306
+
307
+ ```

18

e

2018/02/23 04:20

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
File without changes

17

ええ

2018/02/21 12:09

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -220,7 +220,7 @@
220
220
 
221
221
 
222
222
 
223
- がゴールです。
223
+ が目的とする状態です。
224
224
 
225
225
 
226
226
 

16

っっｄ

2018/02/21 12:06

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -194,9 +194,9 @@
194
194
 
195
195
 
196
196
 
197
- 配列からdata情報だけを受け取りまして、
197
+ 配列からdate情報だけを受け取りまして、
198
-
198
+
199
- data情報を出力しやすいように下記のように加工
199
+ date情報を出力しやすいように下記のように加工
200
200
 
201
201
  ```
202
202
 
@@ -216,7 +216,7 @@
216
216
 
217
217
  イテレート文で出力する。
218
218
 
219
- htmlに出力する。{{post.title.rendered}}後ろに出力したい
219
+ htmlに出力する。出力場所は{{post.title.rendered}}後ろに出力したい
220
220
 
221
221
 
222
222
 

15

、、

2018/02/21 12:06

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -186,7 +186,7 @@
186
186
 
187
187
  ### 最終的にやりたいこと
188
188
 
189
- ![イメージ説明](2b7e2840bd47e9bd24ac6e43fac25c37.png)
189
+ ![イメージ説明](1dc512b68fbc7bb14c2ebcd0823a5f9f.jpeg)
190
190
 
191
191
 
192
192
 

14

：：

2018/02/21 12:04

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -186,7 +186,7 @@
186
186
 
187
187
  ### 最終的にやりたいこと
188
188
 
189
- ![イメージ説明](4549c8bbc710a5782c33a68987cc1cbf.jpeg)
189
+ ![イメージ説明](2b7e2840bd47e9bd24ac6e43fac25c37.png)
190
190
 
191
191
 
192
192
 

13

っっっｄ

2018/02/21 12:02

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -174,10 +174,12 @@
174
174
 
175
175
 
176
176
 
177
- ![イメージ説明](634f48f4736fafde3ac9e35f1d4ad1ea.jpeg)
177
+ ![イメージ説明](061df1b3c2852d4a7a4d1a64095f89c1.jpeg)
178
178
 
179
179
  デバックモードを見たら配列に入っていない模様でした。
180
180
 
181
+ 一番最初の「date」だけがセットされているだけ。なぜでしょうか？？？
182
+
181
183
 
182
184
 
183
185
 

12

：：

2018/02/21 11:59

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -168,7 +168,7 @@
168
168
 
169
169
  for文をかいてjsonの配列情報を入れようと思いましたが、上手く行きませんでした。
170
170
 
171
- {{ kakou_pos[0] }}{{ kakou_pos[2] }}{{ kakou_pos[3] }}の箇所がありますが、
171
+ {{ kakou_pos[0] }}の箇所がありますが、
172
172
 
173
173
  やはり表示されません。
174
174
 

11

っｄ

2018/02/21 11:55

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -60,12 +60,14 @@
60
60
 
61
61
  <div class="page page--home">
62
62
 
63
- <h2>ここはホームです、一覧表示させます。{{ msg }}。{{ kakou_pos[0] }}{{ kakou_pos[1] }}{{ kakou_pos[2] }}<h2>
63
+ <h2>ここはホームです、一覧表示させます。{{ msg }}。<h2>
64
64
 
65
65
  <ul>
66
66
 
67
67
  <li v-for="post in posts">
68
68
 
69
+ {{ kakou_pos[0] }}
70
+
69
71
  {{post.title.rendered}}
70
72
 
71
73
  <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url">

10

っｆ

2018/02/21 11:54

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- apiでゲットしたjsonのデータを算出プロパティを使って加工したいと思ってます。
13
+ apiで吐き出されましたjsonのデータを算出プロパティを使って加工したいと思ってます。
14
14
 
15
15
  ですが、createdのfor文で目的とするjson情報が取得できず、困っております。
16
16
 

9

っｄ

2018/02/21 11:52

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -190,7 +190,7 @@
190
190
 
191
191
 
192
192
 
193
- 各配列からdata情報を受け取って、
193
+ 配列からdata情報だけを受け取りまして、
194
194
 
195
195
  data情報を出力しやすいように下記のように加工
196
196
 
@@ -206,7 +206,17 @@
206
206
 
207
207
  ```
208
208
 
209
- そしてkakou_posts:[]に格納する。のがゴールです。
209
+ そしてkakou_posts:[]に格納する。
210
+
211
+
212
+
213
+ イテレート文で出力する。
214
+
215
+ htmlに出力する。{{post.title.rendered}}後ろに出力したい
216
+
217
+
218
+
219
+ がゴールです。
210
220
 
211
221
 
212
222
 

8

っｄ

2018/02/21 11:51

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  <ul>
66
66
 
67
- <li v-for="post in $root.posts">
67
+ <li v-for="post in posts">
68
68
 
69
69
  {{post.title.rendered}}
70
70
 

7

ええ

2018/02/21 11:46

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  apiでゲットしたjsonのデータを算出プロパティを使って加工したいと思ってます。
14
14
 
15
- ですが、createdのfor文で記事情報を取得できず、困っております。
15
+ ですが、createdのfor文で目的とするjson情報が取得できず、困っております。
16
16
 
17
17
 
18
18
 

6

っｄ

2018/02/21 11:45

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -184,9 +184,15 @@
184
184
 
185
185
  ![イメージ説明](4549c8bbc710a5782c33a68987cc1cbf.jpeg)
186
186
 
187
+
188
+
189
+ 上記は吐き出しているjson情報（情報は一部）です。
190
+
191
+
192
+
187
- data情報を受け取って、
193
+ 各配列からdata情報を受け取って、
194
+
188
-
195
+ data情報を出力しやすいように下記のように加工
189
-
190
196
 
191
197
  ```
192
198
 
@@ -200,9 +206,7 @@
200
206
 
201
207
  ```
202
208
 
203
-
204
-
205
- をkakou_posts:[]に格納していきたい。
209
+ そしてkakou_posts:[]に格納する。のがゴールです。
206
210
 
207
211
 
208
212
 

5

っっｄ

2018/02/21 11:44

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -142,7 +142,7 @@
142
142
 
143
143
  for(var i = 0; i < this.posts.length; i++ ){
144
144
 
145
- return this.kakou_posts[i] = 'ccca'
145
+ return this.kakou_posts[i] = this.posts[i].date
146
146
 
147
147
  }
148
148
 
@@ -178,4 +178,32 @@
178
178
 
179
179
 
180
180
 
181
+
182
+
183
+ ### 最終的にやりたいこと
184
+
185
+ ![イメージ説明](4549c8bbc710a5782c33a68987cc1cbf.jpeg)
186
+
187
+ data情報を受け取って、
188
+
189
+
190
+
191
+ ```
192
+
193
+ var date = new Date(this.posts[i].date);
194
+
195
+ yy = date.getFullYear(date);
196
+
197
+ mm = date.getMonth() + 1;
198
+
199
+ dd = date.getDate();
200
+
201
+ ```
202
+
203
+
204
+
205
+ をkakou_posts:[]に格納していきたい。
206
+
207
+
208
+
181
209
  vue.jsとjavascriptに詳しい方がいらっしゃいましたらご教示お願い致します。

4

っｄ

2018/02/21 11:41

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  apiでゲットしたjsonのデータを算出プロパティを使って加工したいと思ってます。
14
14
 
15
- ですが、createdのfor文で記事情報を所得できず、困っております。
15
+ ですが、createdのfor文で記事情報を取得できず、困っております。
16
16
 
17
17
 
18
18
 

3

っｄ

2018/02/21 11:33

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  apiでゲットしたjsonのデータを算出プロパティを使って加工したいと思ってます。
14
14
 
15
- ですが、createdのfor文がうまく記事をゲットできず、困っております。
15
+ ですが、createdのfor文で記事情報を所得できず、困っております。
16
16
 
17
17
 
18
18
 

2

っｄ

2018/02/21 11:30

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -10,17 +10,13 @@
10
10
 
11
11
 
12
12
 
13
- apiでゲットしたjsonのデータを算出プロパティを使って加工していこうと思ってます。
13
+ apiでゲットしたjsonのデータを算出プロパティを使って加工したいと思ってます。
14
14
 
15
- ### 発生している問題・エラーメッセージ
15
+ ですが、createdのfor文がうまく記事をゲットできず、困っております。
16
16
 
17
17
 
18
18
 
19
19
  下記にソースを示します。
20
-
21
- {{ kakou_pos[0] }}{{ kakou_pos[2] }}{{ kakou_pos[3] }}の箇所がありますが、
22
-
23
- 表示されません。
24
20
 
25
21
 
26
22
 
@@ -170,4 +166,16 @@
170
166
 
171
167
  for文をかいてjsonの配列情報を入れようと思いましたが、上手く行きませんでした。
172
168
 
169
+ {{ kakou_pos[0] }}{{ kakou_pos[2] }}{{ kakou_pos[3] }}の箇所がありますが、
170
+
171
+ やはり表示されません。
172
+
173
+
174
+
175
+ ![イメージ説明](634f48f4736fafde3ac9e35f1d4ad1ea.jpeg)
176
+
177
+ デバックモードを見たら配列に入っていない模様でした。
178
+
179
+
180
+
173
181
  vue.jsとjavascriptに詳しい方がいらっしゃいましたらご教示お願い致します。

1

dd

2018/02/21 11:26

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,12 @@
1
1
  ### 前提・実現したいこと
2
+
3
+
4
+
5
+ ●使用しているフレームワーク
6
+
7
+ vue.js 2.5.x
8
+
9
+ axios
2
10
 
3
11
 
4
12
 
@@ -22,19 +30,47 @@
22
30
 
23
31
  ```html
24
32
 
33
+ <!DOCTYPE html>
34
+
35
+ <html lang="ja">
36
+
37
+ <head>
38
+
39
+ <meta charset="UTF-8">
40
+
41
+ <title>Document</title>
42
+
43
+ <link rel="stylesheet" href="/css/style.css">
44
+
45
+ <script src="https://unpkg.com/vue/dist/vue.js"></script>
46
+
47
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
48
+
49
+ </head>
50
+
51
+ <body>
52
+
53
+
54
+
55
+ <div id="wrapper">
56
+
57
+
58
+
59
+ <!-- <p><input v-model="msg"></p> -->
60
+
61
+ <div class="contents">
62
+
63
+ <transition name="fade" mode="out-in">
64
+
25
65
  <div class="page page--home">
26
66
 
27
- <h2>ここはホームです、一覧表示させます。{{ msg }}。<h2>
28
-
29
- {{ kakou_pos[0] }}{{ kakou_pos[2] }}{{ kakou_pos[3] }}
67
+ <h2>ここはホームです、一覧表示させます。{{ msg }}。{{ kakou_pos[0] }}{{ kakou_pos[1] }}{{ kakou_pos[2] }}<h2>
30
68
 
31
69
  <ul>
32
70
 
33
71
  <li v-for="post in $root.posts">
34
72
 
35
73
  {{post.title.rendered}}
36
-
37
- {{ kakou_pos[0] }}
38
74
 
39
75
  <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url">
40
76
 
@@ -43,6 +79,18 @@
43
79
  </ul>
44
80
 
45
81
  </div>
82
+
83
+ </transition>
84
+
85
+ </div><!--//contents -->
86
+
87
+ </div><!--//wrapper -->
88
+
89
+
90
+
91
+ </body>
92
+
93
+ </html>
46
94
 
47
95
  ```
48
96