【问题标题】:Vue JS: how to get nested JSON dataVue JS:如何获取嵌套的 JSON 数据
【发布时间】:2022-01-25 01:18:30
【问题描述】:

我有像下面这样的 JSON,在付款中.. 我无法获得 cash_payment 的 paid_amount 或 installment_payment 的 paid_amount 和日期

{
    "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
        },}
        

代码如下:

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

【问题讨论】:

    标签: javascript vue.js


    【解决方案1】:
    find.payment.cash_payment.paid_amount
    find.payment.installment_payment.installments[0].paid_amount
    find.payment.installment_payment.installments[1].paid_amount
    

    您将需要一种方法来检测付款方式,如果它是一个数组,还需要对分期付款进行求和。

    未测试示例

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

    【讨论】:

      【解决方案2】:

      你可以尝试如下 sn-p:

      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>

      【讨论】:

      • 抱歉回复晚了...但我无法读取 null 的属性(正在读取 'installment_payment'),以便在分期付款中获得 paid_amount:\
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-20
      • 1970-01-01
      • 2018-07-31
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多