[Vuejs]-Vue js: show data from api is not working properly in my code

by

0👍

I am not sure if I understand your JSON data properly or not. I just came up with below solution as per my understanding. Please let me know if any further discussion/changes required.

You can use two v-for to do the comparison between building._id & flat.floor.

Demo :

new Vue({
  el: '#app',
  data: {
    buildings: [{
            flats: [{
        "status": "avail",
        "price": "Not set",
        "currency": "USD",
        "end_date": "2022-02-18",
        "buyer": "Not Set",
        "buyer_phone_number": "Not Set",
        "receipt_number_field": "Not Set",
        "size_unit": "M",
        "_id": "61e6bccba5da17be7a90fe33",
        "flat_number": 6,
        "description": "This is a newly created flat.",
        "city": "city",
        "floor": "61e6bccba5da17be7a90fe2d",
        "building": "61e6bccba5da17be7a90fe2c",
        "size": "132",
        "directions": "south",
        "createdAt": "2022-01-18T13:12:53.447Z",
        "updatedAt": "2022-02-15T11:15:22.047Z",
        "__v": 0
            }],
      _id: "61e6bccba5da17be7a90fe2d",
      floor_number: 1,
      description: "This is a newly created floor.",
      createdAt: "2022-01-18T13:12:53.447Z",
      updatedAt: "2022-01-18T13:12:53.447Z",
      __v: 0
        }]
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-for="building in buildings" :key="building._id">                
    <span v-for="flat in building.flats" :key="flat._id">
      <span class="iconB" v-if="building._id === flat.floor">Floor Number: {{ building.floor_number }}</span>
    </span>
   </p>
</div>

Leave a comment