はじめに
このプロジェクトでは、ユーザーにとって使いやすい形式で表示するために表データを変換およびフォーマットする方法を学びます。これは、フロントエンド開発者がバックエンドからのデータを扱う際に頻繁に遭遇する一般的なタスクです。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下のことを学びます。
- JSON ファイルからデータを取得するための HTTP リクエストを送信する方法
- 表示に必要な形式に合うようにデータをフォーマットする方法
- Vue.js と Element UI を使って HTML テーブルにフォーマットされたデータをレンダリングする方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
axiosを使って HTTP リクエストを送信してデータを取得する- データを操作して望ましい形式に変換する
- Vue.js と Element UI を統合して、応答性が高く視覚的に魅力的なテーブルコンポーネントを作成する
プロジェクト構造をセットアップする
このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
データを取得するためのリクエストを送信する
このステップでは、fetchTableData.json ファイルからデータを取得するための HTTP リクエストを送信する方法を学びます。
- コードエディタで
index.htmlファイルを開きます。 <script>セクションで、Vue インスタンスのmethodsに新しいgetTableData()メソッドを追加します。getTableData()メソッドの中で、axios.get()関数を使ってfetchTableData.jsonファイルに GET リクエストを送信します。
methods: {
getTableData() {
axios.get("./fetchTableData.json").then((response) => {
// TODO: データをフォーマットして tableData に割り当てる
});
}
}
- Vue インスタンスの
mountedでgetTableData関数を呼び出します。
mounted() {
this.getTableData();
},
データをフォーマットする
このステップでは、データを必要な形式にフォーマットして tableData プロパティに割り当てる方法を学びます。
- コードエディタで
index.htmlファイルを開きます。 <script>セクションで、Vue インスタンス内のgetTableData()メソッドを見つけます。getTableData()関数のthen()メソッドの成功コールバック内で、レスポンスオブジェクトからdataプロパティを取得します。
getTableData() {
axios.get("./fetchTableData.json").then((response) => {
let resData = response.data.data;
});
}
resData配列をループして、要件に応じてデータをフォーマットします。datetimeフィールドの場合、形式をYYYYMMDDからYYYY-MM-DDに変換します。sexフィールドの場合、値を1から"Man"に、0から"Woman"に変換します。vipフィールドの場合、値を1から"Yes"に、0から"No"に変換します。
データをフォーマットするコードは以下の通りです。
getTableData() {
axios.get("./fetchTableData.json").then((response) => {
let resData = response.data.data;
resData.forEach((item) => {
item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
item.sex = item.sex? "Man" : "Woman";
item.vip = item.vip? "Yes" : "No";
});
});
}
- データをフォーマットした後、
resData配列をtableDataプロパティに割り当てます。
getTableData() {
axios.get("./fetchTableData.json").then((response) => {
//...
this.tableData = resData;
});
}
これで、データがフォーマットされて tableData プロパティに割り当てられ、HTML 内のテーブルをレンダリングするために使用されます。
最終的な結果は以下の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。
