With the following codes, I can list a "remote" JSON file with Vue.
Because my JSON file is too big, I wanted to send a parameter called pageNumber to the URL file.
I can see the pageNumber on the page, but it shows data1.json?pg=[object% 20HTMLInputElement] in the URL.
Actually I need more than that. I have to submit all the values in the form. Data1.json, data1.asp, data1.php files.
As a result, I need to give Vue a data source that I filtered.
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
<link
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="node_modules/bootstrap-icons/font/bootstrap-icons.css"
/>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-12">
<form id="urlParameterForm">
<input type="date" name="startDate" id="startDate">
<input type="date" name="endDate" id="endDate">
<input type="number" name="pageNumber" id="pageNumber" value="1" v-on:input="changePage">
<input type="submit" value="Filter" id="Filter">
<p>Page : {{ pageActive }}</p>
</form>
</div>
</div>
<div class="row">
<div class="card-deck">
<div class="card" v-for="dta in dataTable">
<img class="card-img-top" v-bind:src="(dta.bolge+'.jpg')" />
<div class="card-body">
<h5 class="card-title">{{dta.bolge}}</h5>
<p class="card-text">{{dta.sube}}</p>
<p class="card-text">
<small class="text-muted">Total Amount {{dta.netTutar}} .</small>
</p>
</div>
</div>
</div>
</div>
</div>
<script
src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
></script>
<script src="page1.js"></script>
</body>
</html>
page1.js
const app = new Vue({
el: "#app",
data: {
dataTable: [],
pageNumber: 1,
pageActive: 0,
url: './data1.json?pg=' + pageNumber + ''
},
methods: {
changePage: function (event) {
this.pageNumber = event.target.value;
this.pageActive = event.target.value;
},
loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', this.url, true)
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
},
init() {
let that = this
that.loadJSON(function (response) {
var data = JSON.parse(response);
that.dataTable = data.dataTable
});
}
},
mounted() {
this.init()
}
})
data1.json
{
"dataTable": [
{
"bolge": "Akdeniz",
"sube": "Adana Subesi",
"netTutar": 6.499374000000016e+004
},
{
"bolge": "İç Anadolu",
"sube": "Aksaray Subesi",
"netTutar": 1.234576999999999e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Ardahan Subesi",
"netTutar": 2.887150000000001e+003
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Batman Subesi",
"netTutar": 1.701832999999997e+004
},
{
"bolge": "Karadeniz",
"sube": "Çorum Subesi",
"netTutar": 1.663578999999996e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Erzurum Subesi",
"netTutar": 2.212622999999991e+004
},
{
"bolge": "İç Anadolu",
"sube": "Eskişehir Subesi",
"netTutar": 2.628607999999991e+004
},
{
"bolge": "Akdeniz",
"sube": "Isparta Subesi",
"netTutar": 1.462259999999998e+004
},
{
"bolge": "İç Anadolu",
"sube": "Karaman Subesi",
"netTutar": 7.776750000000006e+003
},
{
"bolge": "İç Anadolu",
"sube": "Kırıkkale Subesi",
"netTutar": 8.855070000000003e+003
},
{
"bolge": "Doğu Anadolu",
"sube": "Muş Subesi",
"netTutar": 1.199937999999999e+004
},
{
"bolge": "Marmara",
"sube": "Sakarya Subesi",
"netTutar": 2.829720999999989e+004
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Şanlıurfa Subesi",
"netTutar": 5.823557000000007e+004
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Şırnak Subesi",
"netTutar": 1.675855999999997e+004
},
{
"bolge": "Karadeniz",
"sube": "Trabzon Subesi",
"netTutar": 2.097863999999994e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Van Subesi",
"netTutar": 3.528952999999987e+004
},
{
"bolge": "Ege",
"sube": "Afyonkarahisar Subesi",
"netTutar": 1.972799999999994e+004
},
{
"bolge": "Akdeniz",
"sube": "Antalya Subesi",
"netTutar": 7.528340000000043e+004
},
{
"bolge": "Karadeniz",
"sube": "Artvin Subesi",
"netTutar": 5.710900000000002e+003
},
{
"bolge": "Ege",
"sube": "Aydın Subesi",
"netTutar": 3.227300999999986e+004
},
{
"bolge": "Ege",
"sube": "Balıkesir Subesi",
"netTutar": 3.721826999999994e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Bitlis Subesi",
"netTutar": 1.019894000000000e+004
},
{
"bolge": "Karadeniz",
"sube": "Bolu Subesi",
"netTutar": 8.716130000000007e+003
},
{
"bolge": "Marmara",
"sube": "Bursa Subesi",
"netTutar": 8.114886000000080e+004
},
{
"bolge": "Marmara",
"sube": "Çanakkale Subesi",
"netTutar": 1.524065999999997e+004
},
{
"bolge": "Karadeniz",
"sube": "Düzce Subesi",
"netTutar": 9.727560000000001e+003
},
{
"bolge": "Doğu Anadolu",
"sube": "Erzincan Subesi",
"netTutar": 8.497870000000003e+003
},
{
"bolge": "Akdeniz",
"sube": "Hatay Subesi",
"netTutar": 4.730510999999999e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Iğdır Subesi",
"netTutar": 5.341670000000003e+003
},
{
"bolge": "Akdeniz",
"sube": "Kahramanmaraş Subesi",
"netTutar": 3.231586999999985e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Kars Subesi",
"netTutar": 7.581170000000006e+003
},
{
"bolge": "İç Anadolu",
"sube": "Kırşehir Subesi",
"netTutar": 7.357310000000006e+003
},
{
"bolge": "Akdeniz",
"sube": "Mersin Subesi",
"netTutar": 5.025113000000006e+004
},
{
"bolge": "İç Anadolu",
"sube": "Niğde Subesi",
"netTutar": 1.041342000000000e+004
},
{
"bolge": "İç Anadolu",
"sube": "Sivas Subesi",
"netTutar": 1.790955999999995e+004
},
{
"bolge": "Marmara",
"sube": "Tekirdağ Subesi",
"netTutar": 2.944850999999987e+004
},
{},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Adıyaman Subesi",
"netTutar": 1.820864999999997e+004
},
{
"bolge": "Karadeniz",
"sube": "Amasya Subesi",
"netTutar": 1.123514000000000e+004
},
{
"bolge": "Karadeniz",
"sube": "Bartın Subesi",
"netTutar": 4.758740000000003e+003
},
{
"bolge": "Karadeniz",
"sube": "Bayburt Subesi",
"netTutar": 2.044470000000000e+003
},
{
"bolge": "Akdeniz",
"sube": "Burdur Subesi",
"netTutar": 7.440650000000011e+003
},
{
"bolge": "Karadeniz",
"sube": "Giresun Subesi",
"netTutar": 1.396075999999998e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Hakkari Subesi",
"netTutar": 7.755100000000006e+003
},
{
"bolge": "Ege",
"sube": "İzmir Subesi",
"netTutar": 1.318144500000018e+005
},
{
"bolge": "Karadeniz",
"sube": "Karabük Subesi",
"netTutar": 7.140900000000002e+003
},
{
"bolge": "Karadeniz",
"sube": "Kastamonu Subesi",
"netTutar": 1.099207999999999e+004
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Kilis Subesi",
"netTutar": 4.663510000000003e+003
},
{
"bolge": "Ege",
"sube": "Kütahya Subesi",
"netTutar": 1.738236999999997e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Malatya Subesi",
"netTutar": 2.360268999999993e+004
},
{
"bolge": "Ege",
"sube": "Manisa Subesi",
"netTutar": 4.334794000000000e+004
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Mardin Subesi",
"netTutar": 2.426568999999990e+004
},
{
"bolge": "İç Anadolu",
"sube": "Nevşehir Subesi",
"netTutar": 8.781070000000003e+003
},
{
"bolge": "Karadeniz",
"sube": "Rize Subesi",
"netTutar": 9.731959999999997e+003
},
{
"bolge": "Karadeniz",
"sube": "Samsun Subesi",
"netTutar": 3.853689999999991e+004
},
{
"bolge": "Karadeniz",
"sube": "Sinop Subesi",
"netTutar": 5.248460000000003e+003
},
{
"bolge": "Doğu Anadolu",
"sube": "Tunceli Subesi",
"netTutar": 2.586630000000000e+003
},
{
"bolge": "Marmara",
"sube": "Yalova Subesi",
"netTutar": 6.285410000000009e+003
},
{
"bolge": "İç Anadolu",
"sube": "Yozgat Subesi",
"netTutar": 1.220697999999999e+004
},
{
"bolge": "Karadeniz",
"sube": "Zonguldak Subesi",
"netTutar": 5.757073000000008e+004
},
{
"bolge": "Doğu Anadolu",
"sube": "Ağrı Subesi",
"netTutar": 1.742540999999997e+004
},
{
"bolge": "İç Anadolu",
"sube": "Ankara Subesi",
"netTutar": 1.670151500000000e+005
},
{
"bolge": "Marmara",
"sube": "Bilecik Subesi",
"netTutar": 5.951650000000003e+003
},
{
"bolge": "Doğu Anadolu",
"sube": "Bingöl Subesi",
"netTutar": 8.603440000000004e+003
},
{
"bolge": "İç Anadolu",
"sube": "Çankırı Subesi",
"netTutar": 5.323980000000001e+003
},
{
"bolge": "Ege",
"sube": "Denizli Subesi",
"netTutar": 3.177174999999988e+004
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Diyarbakır Subesi",
"netTutar": 5.651844000000007e+004
},
{
"bolge": "Marmara",
"sube": "Edirne Subesi",
"netTutar": 9.572680000000004e+003
},
{
"bolge": "Doğu Anadolu",
"sube": "Elazığ Subesi",
"netTutar": 1.726290999999997e+004
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Gaziantep Subesi",
"netTutar": 5.729336000000015e+004
},
{
"bolge": "Karadeniz",
"sube": "Gümüşhane Subesi",
"netTutar": 1.342086000000001e+004
},
{
"bolge": "Marmara",
"sube": "İstanbul Subesi",
"netTutar": 4.585003299999837e+005
},
{
"bolge": "İç Anadolu",
"sube": "Kayseri Subesi",
"netTutar": 4.351594999999998e+004
},
{
"bolge": "Marmara",
"sube": "Kırklareli Subesi",
"netTutar": 1.109510999999999e+004
},
{
"bolge": "Marmara",
"sube": "Kocaeli Subesi",
"netTutar": 5.770894000000013e+004
},
{
"bolge": "İç Anadolu",
"sube": "Konya Subesi",
"netTutar": 6.391753000000029e+004
},
{
"bolge": "Ege",
"sube": "Muğla Subesi",
"netTutar": 2.810038999999991e+004
},
{
"bolge": "Karadeniz",
"sube": "Ordu Subesi",
"netTutar": 2.101259999999993e+004
},
{
"bolge": "Akdeniz",
"sube": "Osmaniye Subesi",
"netTutar": 1.826947999999996e+004
},
{
"bolge": "Güneydoğu Anadolu",
"sube": "Siirt Subesi",
"netTutar": 9.255639999999999e+003
},
{
"bolge": "Karadeniz",
"sube": "Tokat Subesi",
"netTutar": 2.010617999999995e+004
},
{
"bolge": "Ege",
"sube": "Uşak Subesi",
"netTutar": 1.051503000000000e+004
}
]
}
JsFiddle : https://jsfiddle.net/omerx/fap75qjb/11/
In page1.js, notice that pageNumber is not yet declared (but it exists in the document):
const app = new Vue({
el: "#app",
data: {
dataTable: [],
pageNumber: 1,
pageActive: 0,
url: './data1.json?pg=' + pageNumber ❌ `pageNumber` not what you think
},
//...
DOM elements with IDs are automatically added as global variables. Since you have an <input> element with id="pageNumber", your pageNumber variable actually refers to that element.
And 'data1.json?pg=' + pageNumber would invoke HTMLInputElement.prototype.toString(), yielding [object HTMLInputElement] as the suffix.
I think you are actually trying to refer to this.pageNumber in the data, but you can't do that in the same declaration. Perhaps you want a reactive url prop that changes with this.pageNumber, which can be done with a computed property:
const app = new Vue({
data: {
pageNumber: 1,
// url: './data1.json?pg=' + pageNumber // DON'T DO THIS
},
computed: {
url() {
return './data1.json?pg=' + this.pageNumber
}
}
})