Retrieving Information from API using Vue.js

In the code snippet below, I am displaying data from an API for all flats on a single page. However, I am facing difficulty in showing the floor number for each flat. The JSON body is as follows:

{
    "response": [
        {
            "floors": [
                {
                    "flats": [
                        {
                            "status": "",
                            "price": "80000",
                            "currency": "USD",
                            "end_date": "Not Set",
                            ...

For your information, there are 6 flats on each floor.

 <b-card-body class="px-lg-5 py-lg-5" v-for="flat in flats" :key="flat._id">
                        <div class="text-center text-muted mb-4 border-dash">
                            <p class="city">{{flat.city}}</p>

                            <span v-for="(building,index) in buildings" :key="index">
                                <p class="iconB" v-if="building._id.includes(flat.building)">{{building.building_number}} building number </p>
  
                                     <h3>{{building.floor_number}} floor</h3> //not working
                            </span>

                            <h2>{{flat.buyer}} <i class="fas fa-user"></i> </h2>
                            <h3 class="mb-5">flat no ({{flat.flat_number}})</h3>

The issue with my code above is that everything displays correctly except for the floor. Any suggestions or assistance would be greatly appreciated.

Answer №1

Your code worked perfectly for me with just a small tweak. I simply extracted the floor_number from your response array because it is located at the same level as the flat, not inside it:

<div v-for="floor in floors">
  {{floor.floor_number}}
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of Ejs partial header and footer file only functioning in one file and not the other (both at the same directory level)

I'm in the process of setting up a view page for a post on the main page of a website. Both pages share the same header and footer files, located at the same directory level. However, while one page is functioning correctly, the other is not. The erro ...

The timing of setTimeout within the $.each function does not behave as expected

I am looking to back up a list, delete all items within it, and then append each item one by one with a delay of 1 second between them. This is the approach I have taken: var backup = $('#rGallery').html(); $('#rGallery li').remove(); ...

Incorporating JavaScript/JSON into your Ebay listings to seamlessly receive user-selected choices

There has been a trend among Ebay users to incorporate dynamic data fetching and sending from external sources in their listings. This could be for implementing a shipping calculator or offering different product variants through dropdown lists. You can c ...

Using jQuery JSONP only functions with URLs from the same site

I am looking to send a request to an API that returns data in json format. The API is located on a sub-domain of the domain where my script will be running (although currently it's on a completely different domain for development, localhost). My unde ...

React Router Link Component Causing Page Malfunction

Recently, I delved into a personal project where I explored React and various packages. As I encountered an issue with the Link component in React Router, I tried to find solutions online without any luck. Let me clarify that I followed all installation st ...

Sending data from a PHP function to an AJAX call in the form of an associative array using json_encode() does not

Greetings, this is my first post so please forgive me if I miss anything or fail to explain clearly. All the code below is within the same PHP file. Here is my AJAX call: $.ajax( { type: "POST", url: window.location.href, data: {func: 'g ...

What steps can I take to stop Highcharts from showing decimal intervals between x-axis ticks?

When the chart is displayed, I want to have tick marks only at integer points on the x-axis and not in between. However, no matter what settings I try, I can't seem to get rid of the in-between tick marks. Chart: new Highcharts.chart('<some i ...

When working with Visual Studio and a shared TypeScript library, you may encounter the error message TS6059 stating that the file is not under the 'rootDir'. The 'rootDir' is expected to contain all source files

In our current setup with Visual Studio 2017, we are working on two separate web projects that need to share some React components built with TypeScript. In addition, there are common JavaScript and CSS files that need to be shared. To achieve this, we hav ...

No active Pinia was found when calling getActivePinia in Vue

I encountered an error message saying: Uncaught Error: [ ...

I have exhausted all options trying to filter a 2D array in JavaScript

The 2D array provided is formatted as follows : [[ONE,1],[QUARTER,0.25],[QUARTER,0.25]] The desired output should be : [[ONE,1],[QUARTER,0.5]] An attempt was made using array.IndexOf but did not yield the expected result ONE,1,QUARTER,0.25,QUARTER,0.2 ...

Unusual issue encountered when launching an express application in node.js

Starting my app is easy with nodemon - just type nodemon However, I encountered an error when trying node app.js https://i.sstatic.net/rRXhZ.png I have checked my package.json and it is properly configured with: "scripts": { "start": "node ./bin/ww ...

Dynamic components enable parental involvement in child communication

My goal is to create a user-friendly form using VUE and LARAVEL where users can build groups of participants dynamically. I have chosen to address this challenge by allowing users to generate a table for each group, where they can add or remove rows. So f ...

Tips for real-time editing a class or functional component in Storybook

Hey there, I am currently utilizing the storybook/react library to generate stories of my components. Everything has been going smoothly so far. I have followed the guide on https://www.learnstorybook.com/react/en/get-started and added stories on the left ...

Show only the portion of the image where the cursor is currently hovering

Information in advance: You can check out the current code or view the live demo (hover image functionality not included) at . The concept: I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the s ...

Customizing the layout of specific pages in NextJSIncorporating

In my Next.js project, I'm trying to set up a header and footer on every page except for the Login page. I initially created a layout.tsx file in the app directory to apply the layout to all pages, which worked fine. However, when I placed another lay ...

Troubleshooting React Native in VS Code using Node shims

I recently started working on a React Native project using the Ignite CLI 2.0.0 default boilerplate, and I find myself in need of some dependencies from node-based packages. To address this, I created files named transformers.js, babel-transform.js, and r ...

Effortlessly communicate events from a nested component to its parent in Vue 2

In my project, I created a base component called BaseInput.vue which accepts attributes and emits events. To easily bind all attributes, I use the v-bind="$attrs" directive. // BaseInput.vue <template> <label> <input v- ...

Adjust size of item within grid component in VueJS

I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images). https://i.stack.imgur.com/q4MKZ.png This is my current grid setup, and I would like the ...

Error message: Nextjs encounters hydration issue only in the production environment

I've been facing this issue for hours now. I deployed my Next.js application on Vercel and encountered numerous hydration errors there. Interestingly, in my local development environment, I don't experience any errors at all. I came across sugge ...