How to Check Response Data Length in VueJS ?

Last Updated : 28 Apr, 2025

Vue.js is an open-source progressive JavaScript framework for developing user interfaces, Vue js makes it simple and easy to use reusable components. While getting response data from any API it is sometimes necessary for us to read the response length so that we can iterate over the length to render necessary data. In this article, we will see how we can check the response data length in Vue JS.

Response data is the data or information we get when we make an API call to the server the server processes our request and sends a response with the necessary information we asked the server while sending a request this is generally done using query parameters in URL once the server is ready with the response it stringifies the data which is then parsed in our app to get in form of object or array.

There are various approaches to getting the length of data we received so that we can apply operations to it, In this article we will be discussing two of the most commonly used approaches.

Approach 1: Using the length property of the response data

One way to check the response data length is to use the built-in length property for the arrays in Javascript, since the response data we get from JSON is mostly array so we can get the length of this array to check the number of elements in response data.

Example: In this example, we will use the Axios library to make an API call to get users' data and then we will use the built-in javascript array length property on response data which is an array to get the number of users in the array and then we will log this length in the console.

App.vue

HTML

<template>     <div>         <h1 style="color: green">             GeeksforGeeks         </h1>         <h3 style="color: green">             This is an article on How to              check response length in Vue Js         </h3>         <button @click="getUsers">             Get Users         </button>     </div> </template>  <script>     import axios from 'axios';          export default {       data() {         return {           users: [],         };       },            methods: {         async getUsers() {           const response = await axios.get(              'https://...com/users');           this.users = response.data;           console.log(this.users.length);         },       },     }; </script>

Note: The above example uses the Axios(in order to make API requests and store responses in response data), which needs to inject as dependency injection, in order to see the output.

Output: As you can see (in the below output gif), when we click on the get users button an API call is made and we get data in form of an array on which we apply a built-in array.length property which gives us the length of the array and that length is then logged onto the console using console.log() the total number of users we get in this example is 10 as you can see in the console.

Approach 2: Using the Object.keys() method

In this approach we use Objects.keys() method which returns an array of keys in the javascript object we can use this array to get the length of a received object by using built-in properties of the javascript array.

Example: In this example, we will make an API call to get comments the received data is an object so we use Object.keys() method on the received data to get all keys in the data in form of the array now we can use an array. length property to get the length of data received and then we render the length.

App.vue

HTML

<template>     <div>         <h1 style="color: green">             GeeksforGeeks         </h1>         <h3 style="color: green">             This is an article on How to             check response length in Vue Js         </h3>         <button @click="getComments">             Get Comments         </button>         <p>             Number of comments: {{ commentCount }}         </p>     </div> </template>  <script>     export default {         data() {             return {                 comments: {},             };         },              computed: {             commentCount() {                 return Object.keys(this.comments).length;             },         },              methods: {             async getComments() {                 const response = await fetch(                     "https://...com/comments"                 );                 this.comments = await response.json();             },         },     }; </script>

Output: As you can see (in the below output gif) when we click on Get comments the API call is made and we get the requested data in form of an object and then an object.keys() method is called which converts our object data into array form on which array.length property is used which is then rendered.

sudhanshutomar007

Improve

Article Tags :

How to Check Response Data Length in VueJS ?

Similar Reads