Vue js : filter data from API

Question

in my project below, i have an API that contains 36 buildings, in each building 22 levels and in each floor there are 6 flats... i wanted to view all these data in table for each building and till now floors are good but i'm stuck to show 6 flats in each level.. in my below code it gives me the flats for all the building id clicked. However, in my post method i specified each of this detail so API is good but i don't have an idea on how to implement flats in each floor.

 <template> <b-card no-body class="bg-default shadow"> <b-table-simple responsive> <b-thead> <b-tr> <b-th sticky-column>Sticky Column Header</b-th> <b-th v-for="(building, index) in Building.flats":key="index">{{index}}</b-th> //not working ( shows all flats for building clicked) </b-tr> </b-thead> <b-tbody> <b-tr v-for="(building, index) in Building.floors":key="index"> <b-th sticky-column>{{index}}</b-th> <b-td>Cell</b-td> </b-tr> </b-tbody> </b-table-simple> </b-card> </template> <script> import projects from './../projects' import { Table, TableColumn} from 'element-ui' import BuildingsService from "@/services/ApiService" export default { name: 'light-table', components: { }, data() { return { Flats:[], Floors:[], Building:[], NoOfFloors: [], projects, currentPage: 1 }; }, methods:{ index(){ } }, mounted: function(){ BuildingsService.getOneBuilding(`${this.$route.params.id}`).then((response) => { this.Building = response.data.response; this.NoOfFloors = this.Building.floors; console.log(this.Building.floors,"single"); }); BuildingsService.getFlats().then((response) => { this.Flats = response.data.response; // console.log(response.data.response,"flats"); }); } } </script>

 {"response":[{"floors":[{"flats":[{"status":"Available","price":"Not set","currency":"USD","_id":"61bdfebd1d7df1a88b70c3a0","flat_number":0,"description":"This is a newly created flat.","city":"Istanbul","payment_type":null,"floor":"61bdfebd1d7df1a88b70c39f","building":"61bdfebd1d7df1a88b70c39e","createdAt":"2021-12-18T15:31:14.383Z","updatedAt":"2021-12-18T15:31:14.383Z","__v":0},{"status":"Available","price":"Not set","currency":"USD","_id":"61bdfebd1d7df1a88b70c3a1","flat_number":1,"description":"This is a newly created flat.","city":"Istanbul","payment_type":null,"floor":"61bdfebd1d7df1a88b70c39f","building":"61bdfebd1d7df1a88b70c39e","createdAt":"2021-12-18T15:31:14.384Z","updatedAt":"2021-12-18T15:31:14.384Z","__v":0},{"status":"Available","price":"Not set","currency":"USD","_id":"61bdfebd1d7df1a88b70c3a2","flat_number":2,"description":"This is a newly created flat.","city":"Istanbul","payment_type":null,"floor":"61bdfebd1d7df1a88b70c39f","building":"61bdfebd1d7df1a88b70c39e",

update: i want to get the indexes of this array

Answer 1

You probably want to nest flats inside floors , and then filter the flats based on the current floor . It looks like each flat has a floor property which presumably matches an property in floor . Assuming this is floor.id , you can do something like:

<div v-for="(floor, floor_index) in Building.floors" :key="floor_index">
  <pre>Floor: {{ floor }}</pre>
  <div v-for="(flat, flat_index) in Building.flats" :key="flat_index">
    <pre v=if="flat.floor === floor.id">Flat: {{ flat }}</pre>
  </div>
</div>