2018.08.15

CordovaとVue.jsでjsonデータをパースし一覧表示する方法(サンプルコード有)

ReactやAngularを使う人が増えているものの、依然、
Cordovaでハイブリッドアプリを構築する際、フロントエンドにvue.jsを使う方は多いと思います。
Vue.jsでは、APIへの接続及びデータ取得、一覧表示までをシンプルに実装することが
できます。
—————————————————————————————
1.cordovaとvue.jsはインストール済みとします
—————————————————————————————
2.共通ファイルにAPIの処理を実装します
プロジェクト名/src/utilに、api.jsというファイルを作成します。
今回は、axiosのgetメソッドを使用してAPIに接続します。
ここに作成したファイルを後程コンポーネントでインポートします。
—————————————————————————————

import axios from ‘axios’ //今回はAPIリクエストにaxiosを使用します
import NeDB from ‘nedb’ //インメモリdbのインポート
import assert from ‘assert’
export {loadData} //loadDataとしてconponentにエクスポートします
var db = {}

//取得したjsonのデータをインメモリのdbに格納します
function saveData (name, locale, docs) {
if (!db[name]) {
db[name] = {}
}
if (!db[name][locale]) {
db[name][locale] = new NeDB()
}
for (const doc of docs) {
const keys = { _id: doc._id }
db[name][locale].update(keys, doc, {upsert: true}, (err, numAffected, affectedDocuments, upsert) => {
// console.log(err, numAffected, affectedDocuments, upsert)
assert.equal(null, err)
})
}
}

//以下のfunctionでAPIからjsonを取得します
function loadData (name, locale) {
//インメモリのdbを参照しデータが格納されていれば返答します
if (db[name] && db[name][locale]) {
return new Promise((resolve) => {
db[name][locale].find({}, (err, docs) => {
assert.equal(null, err)
resolve(docs)
})
})
}
//URLを定義します。慣れてきたら.envにURLを定義して共通化しましょう。
const url=’http://hogehoge/hogehoge’
return axios.get(url) //URLにgetメソッドでリクエスト
.then((response) => {
//.then(引数)で成功した場合にレスポンスデータを返す
return(response.data)
return new Promise((resolve) => {
//インメモリdbにデータを保存
saveData(name, locale, response.data)
resolve(response.data)
})
})
}

—————————————————————————————
3.componentディレクトリでjsonのパース、一覧表示
次に、api.jsから返答されたデータを一覧表示します。
api.jsをインポートし、返答されたレスポンスデータをv-ons-listにバインドしています。
—————————————————————————————
v-ons-page#main
.top
v-ons-row.image
v-ons-col
img(src=”../../assets/images/sample.jpg”)
v-ons-row.barcode
v-ons-col
barcode#barcode(value=”*123456-CODE128*”,background=”transparent”,height=45,width=2)

v-ons-list#list
v-ons-list-header {{ $t(‘attractions.title’) }}
v-ons-list-item(modifier=”chevron”,tappable,v-for=”datum of data”,:data=”datum”,:key=”datum._id”,@click=”showModal(datum)”) {{ data[‘banners’][0][‘imageURL’] }}
//{}内に取得したデータの要素を記述します。また、v-for=”datum of data”で
配列からループで要素を表示します(foreach的なやつです)

javascriptに関しては、以下をスクリプトタグで囲んで
同じファイル内に記述します。

//api.jsからloadDataをインポート
import {loadData} from ‘../../util/api’ import VueBarcode from ‘vue-barcode’

export default {
name: ‘pass’,
components: {
‘barcode’: VueBarcode
},
data () {
return {
data: [],
modalVisible: false,
currentDatum: {}
}
},
watch: {
‘$i18n.locale’: function () {
this.reload()
}
},
mounted: function () {
this.loadData()
},
methods: {
loadData: function () {
loadData(‘pass’, this.$i18n.locale).then((json) => {
//取得したjsonを変数に格納します
this.$data.data = json
}).catch((err) => {
console.error(err)
this.$data.data = []
})
},
reload: function () {
this.loadData()
},
showModal: function (datum) {
this.$data.currentDatum = datum
this.$data.modalVisible = true
},
makeBarcode: function () {
// qrcode.toCanvas(this.$refs.qrcode, ‘Test Data’)
}
}}

BACK