今日は試験です！

さて、これまでMonacaのOnsenUI Master-Detaiをカスタマイズして、JSONデータを組み合わせてアプリを作ってきました。今回は前回の宿題（詳細画面にJSONデータを表示する）を確認した後、確認テストをします。テスト問題は以下の通りです。

 問題1　プログラムリスト1について以下の設問に答えなさい。

1. patient.idの値を答えなさい。
   
2. patient. genderと同じ意味を表すのは patient[A] である。Aには何が入るか？
   
3. 患者オブジェクト patientに属性emailを加えたい。どうすればよいか。ただし、メールアドレスはA0001@kwmw.jpとする。
   

 問題2　プログラムリスト2について以下の設問に答えなさい。

1. patientList[2].nameの値は何か
   
2. 次の命令を実行したときの実行結果を書きなさい
   

   $.each(patientList, function(i, patient) {
     console.log(i + ',' + patient.id);
    }
   );
   

3. これは上記と同じ実行結果を出力するプログラムである。AとBには何が入るか？
   

   for(var i = 0; i < A; i++) {
    console.log(i + ',' + patientList[B].id);
   }
   

問題3　プログラムリスト3について以下の設問に答えなさい。

1. 下記の変数の値は何か
   visitData['A0001'][1].date
   visitData['A0002'][0].diseaseName
   visitData['A0003'][2].dept
   visitData['A0003'][3].diseaseName
   
2. 次の命令を実行したときの実行結果を書きなさい
   

   var patientId = 'A0002';
   for(var i = 0; i < visitData[patientId].length; i++) {
    var visit = visitData[patientId][i];
    console.log(i + ',' + visit.date);
   }
   

3. これは上記と同じ実行結果を出力するプログラムである。AとBには何が入るか？
   

   var patientId = 'A0002';
   A(visitData[B], function(i, visit) {
     console.log(i + ',' + visit.date);
    }
   );
   

なお、問題文中のプログラムリストは下記の通りです。

プログラムリスト1
var patient = {
 "id": "A0001",
 "name": "在本　璃奈",
 "gender": "female",
 "birthdate": "1996/4/1",
 "address": "岡山県倉敷市山田町１丁目－２－３"
};

プログラムリスト2
var patientList = [
 {
  "id": "A0001",
  "name": "在本　璃奈",
  "gender": "female",
  "birthdate": "1996/4/1",
  "address": "岡山県倉敷市山田町１丁目－２－３"
 },
 {
  "id": "A0002",
  "name": "清水　伸平",
  "gender": "male",
  "birthdate": "1995/5/10",
  "address": "岡山県岡山市苦米地３丁目－５－６"
 },
 {
  "id": "A0003",
  "name": "田中　昌昭",
  "gender": "male",
  "birthdate": "1958/7/6",
  "address": "岡山県瀬戸内市大岡５丁目－９－８"
 }
];

プログラムリスト3
var visitData = {
 "A0001": [
  {
   "date": "2016/5/20",
   "dept": "内科",
   "diseaseName": "気管支炎"
  },
  {
   "date": "2014/1/29",
   "dept": "外科",
   "diseaseName": "大腿骨骨折"
  },
  {
   "date": "2015/8/6",
   "dept": "耳鼻科",
   "diseaseName": "中耳炎"
  }
 ],
 "A0002": [
  {
   "date": "2016/3/19",
   "dept": "内科",
   "diseaseName": "インフルエンザ"
  },
  {
   "date": "2015/2/10",
   "dept": "外科",
   "diseaseName": "虫垂炎"
  }
 ],
 "A0003": [
  {
   "date": "2016/4/8",
   "dept": "眼科",
   "diseaseName": "白内障"
  },
  {
   "date": "2013/2/5",
   "dept": "内科",
   "diseaseName": "心筋梗塞"
  },
  {
   "date": "2011/11/4",
   "dept": "皮膚科",
   "diseaseName": "アトピー性皮膚炎"
  },
  {
   "date": "2014/12/15",
   "dept": "精神科",
   "diseaseName": "気分障害"
  }
 ]
};

応用 

上記の問題文中のpatientList(プログラムリスト2)とvisitData(プログラムリスト3)を使って次のようなアプリを作ってみよう。

 

左側の患者リストはプログラムリスト2のpatientListを使っている。表示項目はカルテ番号(id)、性別(gender)、氏名(name)、生年月日(birthdate)、住所(address)で、患者をタップするとその患者の受診一覧が表示される（右側）。この画面には患者の基本属性（カルテ番号、性別、氏名、生年月日、住所）に加えてこれまで受診した診療科(dept)と受診日(date)、そして診断名(diseaseName)が一覧となって表示される。この受診履歴は1患者につき受診した診療科とその受診日の数だけある。
プログラムを作成するうえでの注意点としては、これまではtitle, label, desc, photoという項目だったのに対して、今度はid, gender, name, birthdate, addressという項目になるので、それに合わせてclass名やスタイルシートの変更が必要になる。