質問編集履歴
2
参考プログラムの修正と追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
100問ほどの問題を年度別に.jsonファイルにまとめて(例: 平成29年度春期試験.json、平成28年度秋期試験.json)、ナビゲーションから対象年度を動的に切り替えながら、それに含まれる問題を下記のようにリスト表示したいと考えています。
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
[平成29年度試験.json]
|
|
5
|
+
[www/assets/data/平成29年度試験.json]
|
|
6
6
|
```.json
|
|
7
7
|
{
|
|
8
8
|
"questions": [
|
|
@@ -42,31 +42,55 @@
|
|
|
42
42
|
|
|
43
43
|
現在Angularで上記のjsonを、とりあえず([title], [question_main])の形で表示させようとしているのですが、呼び出し方がいまいち理解できません。実際のコードではありませんが、下記のような形で悩んでいます。
|
|
44
44
|
|
|
45
|
+
[src/pages/home/home.ts]
|
|
45
46
|
```angular2
|
|
47
|
+
import { Component } from '@angular/core';
|
|
48
|
+
import { NavController } from 'ionic-angular';
|
|
49
|
+
import { JsonData } from '../../providers/Json-data';
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
@Component({
|
|
53
|
+
selector: 'page-home',
|
|
54
|
+
template: `
|
|
55
|
+
<div *ngFor="let patient of patients">
|
|
56
|
+
<h3>Name: {{patient.name}}</h3>
|
|
57
|
+
</div>`
|
|
58
|
+
})
|
|
59
|
+
export class HomePage {
|
|
60
|
+
|
|
61
|
+
data: any;
|
|
62
|
+
|
|
63
|
+
constructor(public navCtrl: NavController, public dataService: JsonData) {
|
|
64
|
+
this.data = dataService.getData();
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
[src/providers/json-data.ts]
|
|
70
|
+
```angular2
|
|
46
71
|
import { Injectable } from '@angular/core';
|
|
47
72
|
import { Http } from '@angular/http';
|
|
48
73
|
import 'rxjs/add/operator/map';
|
|
49
74
|
|
|
50
75
|
@Injectable()
|
|
51
|
-
export class
|
|
76
|
+
export class JsonData {
|
|
52
77
|
|
|
78
|
+
data: any;
|
|
79
|
+
|
|
53
80
|
constructor(public http: Http) {}
|
|
54
81
|
|
|
55
|
-
|
|
82
|
+
getData(){
|
|
56
|
-
if(this.data){
|
|
57
|
-
return Promise.resolve(this.data);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
return new Promise(resolve => {
|
|
61
|
-
|
|
83
|
+
return this.http.get('assets/data/平成29年度試験.json')
|
|
84
|
+
.map(res => res.json()).subscribe(data => {
|
|
62
|
-
this.data =
|
|
85
|
+
this.data = data.patients;
|
|
63
|
-
resolve(this.data);
|
|
64
|
-
console.log(
|
|
86
|
+
console.log(data);
|
|
87
|
+
return data;
|
|
65
|
-
})
|
|
88
|
+
})
|
|
66
|
-
});
|
|
67
89
|
}
|
|
68
|
-
}
|
|
69
90
|
```
|
|
91
|
+
|
|
92
|
+
いろいろ調べては見たのですが、正直あまり理解できていないので、ご教授頂けたらと思います。
|
|
93
|
+
|
|
70
94
|
したいことは、ページの遷移に応じてjsonから適切にデータを当てはめることです。
|
|
71
95
|
平成29年度試験が選ばれたら[h29_questions.json]、28年度試験なら[h28_questions.json]に切り替え、そこに含まれるtitleとquestion_mainを*ngIfで回してリスト表示をし、その他の項目も使って解説ページを表示したいと考えています。
|
|
72
96
|
|
1
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
}
|
|
69
69
|
```
|
|
70
70
|
したいことは、ページの遷移に応じてjsonから適切にデータを当てはめることです。
|
|
71
|
-
平成29年度試験が選ばれたら[h29_questions.json]、28年度試験なら[h28_questions.json]に切り替え、
|
|
71
|
+
平成29年度試験が選ばれたら[h29_questions.json]、28年度試験なら[h28_questions.json]に切り替え、そこに含まれるtitleとquestion_mainを*ngIfで回してリスト表示をし、その他の項目も使って解説ページを表示したいと考えています。
|
|
72
72
|
|
|
73
73
|
上記のJsonを利用可能にするためのhttpリクエスト(?)の書き方や、解決に役立つ記事などを教えて頂ければ幸いです。
|
|
74
74
|
まだこうした製作をして日が浅いので、そもそもこうした情報をローカルjsonで保存するのが適切か否かという点でも意見を頂ければなと思います。
|