Vue.js provides an interesting object that contains observed data

My axios request looks like this:

retrieveData() {                                        
    Axios.get(                                        
        '/vue/get-data/',                           
        {                                             
            params: {                                 
                categories: this.category,            
                activeFilters: this.activeFilters,    
            }                                         
        }                                             
    ).then((result) => {                            
        this.banners = result.data;                 
        this.setBanner();                             
    })                                                
},           

After making the request, I receive the following:

https://i.sstatic.net/tTQ3W.png

However, when I attempt to

console.log(response.data.length)
, I am getting undefined. This issue is quite puzzling!

Upon inspecting the 'banners' object in my vue-devtools, I can see that it contains 2 objects:

https://i.sstatic.net/Qg0Yr.png

So why is response.data.length showing up as undefined?

Answer №1

You are receiving an object and not an array, which is why the .length property is not working and you are getting 'undefined'.

this.banners = response.data[0]; // for first

Alternatively, you can loop over the data to access each object's data:

for(var i in response.data){
     console.log(response.data[i]);
}

If your goal is not to access each value individually and only want to check the size, you can refer to this answer.

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

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...

Creating dynamic Ionic slides by fetching data from a database

I am currently experimenting with Ionic. Web development is not my strong suit, so I may be a bit off the mark. However, I would like to retrieve data from an SQLite database and display it on an ion-slide-box. Here is what I have attempted: function sel ...

Guide on how to trigger a pop-up modal to open a new webpage by clicking on a hyperlink

I have a page called one.html that has a link on it <a href="#">Click to open second page<a/> When this link is clicked, I would like for second.html to open in a popup modal. The second page contains a basic table that I want to di ...

Implementing Jquery after async ajax refresh in an asp.net application

My ASP.net page is heavily reliant on jQuery. Within this page, I have a GridView placed inside an UpdatePanel to allow for asynchronous updates. <asp:GridView ID="gvMail" runat="server" GridLines="None" AutoGenerateColumns="false" ...

Retrieve the most recent information from a web scraper and display it on the Heroku application

After creating an API with Express.js and using cheeriojs to scrape a website, I deployed the API on Heroku. However, my web application is not fetching the latest data from the scraped website. It seems to be stuck showing old data. How can I make it co ...

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

What is the best method for implementing a file upload feature using jQuery and php?

Could someone explain how to create a jQuery multiple image upload feature (uploading without refreshing the page after choosing a file, only displaying the image but not inserting it into a database), and submit additional form data along with all images ...

Mastering the art of utilizing callback functions

As a newcomer to Javascript and Jquery, I am still learning the basics. One thing that confuses me is how javascript executes each line as it encounters it. In a certain scenario (when my value is greater than 9), the custom alert will trigger and the wind ...

Tips for passing an object as an argument to a function with optional object properties in TypeScript

Consider a scenario where I have a function in my TypeScript API that interacts with a database. export const getClientByEmailOrId = async (data: { email: any, id: any }) => { return knex(tableName) .first() .modify((x: any) => { if ( ...

Having trouble adding a div in React due to the error "Objects are not allowed as a React child"?

While I am rendering the data and displaying it between divs, I keep getting this error: Objects are not valid as a React child (found: Wed Dec 09 1998 00:00:00 GMT+0530 (India Standard Time)). If you meant to render a collection of children, use an ...

Using a combination of jQuery and JavaScript to switch image tags between different classes

I'm really struggling with this issue and could use some guidance. Essentially, I have a code that should change the class of an img tag when a user clicks on a div element. Let's take a look at the HTML structure: <li><img src ...

Background styling for TreeItems in Material-UI's TreeView

Just recently, I encountered an interesting phenomenon while working with the following dependencies: "@material-ui/core": "4.8.3", "@material-ui/lab": "4.0.0-alpha.37" After deselecting a TreeItem and selecting another one, I noticed that there was no lo ...

How can I effectively address issues with jqGrid's sorting and paging functionality?

After making changes to the server-side code, it now looks like this: int nm = objects.ToList().Count; if (objects.ToList().Count > 0) return new PagedList(objects, nm, 1, 25, null); else return null; The JSON data has been updated as follows ...

VueJs: utilizing computed properties within a looped property

Uncertainty clouds my judgment on whether the question title is the optimal approach for achieving my goal. To elaborate on the issue at hand: Within a Vue root component, I have a property specified within the data key, such as months. As I iterate over ...

Passport verification is successful during the login process, however, it encounters issues during registration

I am currently learning about passport.js and session management, and I'm in the process of implementing a local login feature on my website. Here is what I am attempting to achieve: Secret page: Authenticated users can access the secret page, while ...

Refreshing the dropdown selection to a specific option using AngularJS and either JavaScript or jQuery

Currently, I am facing an issue with resetting the select tag to its first option. I have implemented Materialize CSS for styling purposes. Despite my efforts, the code snippet below is not achieving the desired outcome. Here is the JavaScript within an ...

Exploring the possibilities of using AngularJS for AJAX functionality in a Ruby On Rails

I recently started learning AngularJS and Rails, and I attempted to develop a Rails application incorporating AngularJS. Currently, I am looking to make a POST request to send data and insert it into the database. In the Activity Controller: def create ...

Error in three.js: Attempting to access the 'rotation' property of an undefined object

As I try to animate a cube in my scene, I keep encountering an error that reads: "TypeError: Cannot read property 'rotation' of undefined." function animate() { requestAnimationFrame( animate ); render(); } ...

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

Using Vuex: Delay dispatch of action until websocket response received

Let's look at the given scenario and premises: To populate a chat queue in real time, it is necessary to establish a connection to a websocket, send a message, and then store the data in a websocket store. This store will handle all the websocket sta ...