i have JSON like below, in payment .. i can't get cash_payment's paid_amount or installment_payment's paid_amount and date as well
{
"response": [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "dokj",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},}
code below:
<template>
<div>
<!-- Header -->
<div >
<b-container>
<div >
<b-row >
<b-col xl="5" lg="6" md="8" >
</b-col>
</b-row>
</div>
</b-container>
</div>
<!-- Page content -->
<b-container >
<b-row >
<b-col lg="7" md="10">
<b-card no-body style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header >
<div >
<h2> details </h2>
</div>
</b-card-header>
<b-card-body v-if="roles ==='Admin'">
<div >
</div>
<validation-observer ref="formValidator">
<b-form role="form">
<select v-model="City">
<option value="" selected disabled> choose city </option>
<option value="duhok" >doki</option>
>
</select>
<div v-if="City=='duhok'" v-for="(flat,index) in Flats" :key="index" v-show="flat.city=='doki'">
{{flat.city}} // i can get city easily
<pre style="color:white;" v-for="(find,indexT) in flat" :key="indexT"> {{find.paid_amount}} </pre> //didn't work
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import BuildingsService from "../../../services/ApiService"
export default {
name: 'light-table',
components: {
},
data() {
return {
buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
};
},
computed: {
roles() {
let roles = JSON.parse(sessionStorage.getItem('user')).role;
return roles;
},
},
mounted: function () {
BuildingsService.getAllFlats().then((response) => {
this.Flats = response.data.response;
});
BuildingsService.getBuildings().then((response) => {
this.Building = response.data.response;
console.log(this.Building, "buildings");
});
},
}
</script>CodePudding user response：
find.payment.cash_payment.paid_amount
find.payment.installment_payment.installments[0].paid_amount
find.payment.installment_payment.installments[1].paid_amount
You will need a method to detect the payment method and also sum the installments if it is an array.
Non tested example
getPaidAmount(flat) {
if (flat.payment.cash_payment){ return Number(payment.cash_payment.paid_amount) }
if (flat.payment.installment_payment){
const arr = flat.payment.installment_payment.installments.map(it=>Number(it.paid_amount))
const sum = arr.reduce(function (a, b) {return a b;}, 0);
return sum
}
}
CodePudding user response：
You can try like following snippet:
new Vue({
el: '#demo',
data() {
return {
response: [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "doki",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},
],
//buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
}
},
computed: {
roles() {
//let roles = JSON.parse(sessionStorage.getItem('user')).role;
//return roles;
},
cities() {
return this.response.map(r => r.city)
}
},
mounted: function () {
//BuildingsService.getAllFlats().then((response) => {
this.Flats = this.response;
//});
//BuildingsService.getBuildings().then((response) => {
this.Building = this.response;
//console.log(this.Building, "buildings");
//});
},
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
<b-container >
<b-row >
<b-col lg="7" md="10">
<b-card no-body style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header >
<div >
<h2> details </h2>
</div>
</b-card-header>
<b-card-body >
<validation-observer ref="formValidator">
<b-form role="form">
<select v-model="City">
<option value="" selected disabled> choose city </option>
<option v-for="city in cities" >{{ city }}</option>
</select>
<div v-for="(flat,index) in Flats" :key="index" style="color:white;" v-show="City">
<div v-if="flat.payment.cash_payment && flat.city === City">
{{ flat.city }}
<pre style="color:white;" v-for="(find,indexT) in flat.payment" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
<div v-else v-if="flat.payment.installment_payment && flat.city === City">
{{ flat.city }}
<pre v-for="(find,indexT) in flat.payment.installment_payment?.installments" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>