Vue JS：如何获取嵌套的 JSON 数据

Question

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 class="header bg-gradient-success py-7 py-lg-8 pt-lg-9"> <b-container> <div class="header-body text-center mb-7"> <b-row class="justify-content-center"> <b-col xl="5" lg="6" md="8" class="px-5"> </b-col> </b-row> </div> </b-container> </div> <,-- Page content --> <b-container class="page-contet mt--8 pb-5"> <b-row class="justify-content-center"> <b-col lg="7" md="10"> <b-card no-body class="bg-white border-0 mb-0" style="background, linear-gradient(87deg; #172b4d 0, #1d2026 100%):important."> <b-card-header class="bg-transparent pb-5"> <div class="text-muted text-center mt-2 mb-3"> <h2> details </h2> </div> </b-card-header> <b-card-body class="px-lg-5 py-lg-5" v-if="roles ==='Admin'"> <div class="text-center text-muted mb-4"> </div> <validation-observer ref="formValidator"> <b-form role="form"> <select class="status-info" 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>

Answer 1

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
  }
}

Answer 2

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 class="page-contet mt--8 pb-5"> <b-row class="justify-content-center"> <b-col lg="7" md="10"> <b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%);important,"> <b-card-header class="bg-transparent pb-5"> <div class="text-muted text-center mt-2 mb-3"> <h2> details </h2> </div> </b-card-header> <b-card-body class="px-lg-5 py-lg-5" > <validation-observer ref="formValidator"> <b-form role="form"> <select class="status-info" 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>