How to get length of returned JSON object with Vue JS 3

Question

How can I get the length of a json object in vue?

I use axios to post a keyword to my PHP script which returns JSON like this:

1: {image: "cms/images/producten/universele-folie/thumbnail/orajet_folie_wit.jpg",…}
2: {image: "cms/images/producten/wrap-cast/thumbnail/wrap.jpg", title: "Wrap folie",…}
3: {image: "cms/images/producten/transparante-folie/thumbnail/orajet_folie_transparant.jpg",…}
4: {image: "cms/images/producten/zandstraalfolie/thumbnail/materiaal-folie-zandstraalfolie.png",…}
5: {image: "cms/images/producten/vloerfolie/afbeeldingen/544_587cdea0a62b4429_2.jpg",…}
6: {image: "cms/images/producten/easy-folie/afbeeldingen/easy_dot.jpg",…}

I want to limit this object so that when looping it, it stops at 6. But I have no clue how to get the length of this object, how can I see that there are in above example 6 results?

I tried .length but this does not work on objects. I've tried .keys like in below example:

let app = Vue.createApp({
    data: function(){
        return{
            // Object to fill with JSON response
            responsedata:{},
            showResultDiv: false
        }
    },
    methods:{
        // Function to show loading dots until json returned
        loadDiv(condition, content){
            this.showResultDiv = condition
        },
        async fetchResults(){
            await axios.post('includes/searchproducts_json.php', {
                // Post data, add value of input to searchterm
                searchterm: this.$refs.searchterm.value
            })
            .then((response)=>{
                this.responsedata = response.data
                console.log(this.responsedata.keys)
            })
            .catch((error)=>{
                console.log(error)
            })
        }
    },
    computed: {

    }
})

app.mount('#v_search');

But this just logs undefined. How can I limit this object? Preferably create 1 object to loop with just 6 results and a data object that contains the number of all results.

Does this answer your question? [How to efficiently count the number of keys/properties of an object in JavaScript](https://stackoverflow.com/questions/126100/how-to-efficiently-count-the-number-of-keys-properties-of-an-object-in-javascrip) — Simon K, Feb 01 '22 at 13:27

score 1 · Accepted Answer · answered Feb 01 '22 at 14:02

You can use Method 1: Object.keys(yourObject)

Object.keys(this.responsedata).length

However, this method has memory overhead and would be slower than Method 2

Method 2: for-loop

let objectSize = 0;
for(let k in this.responsedata) {
  objectSize++
}
// objectSize here holds the size of your object
return objectSize

This methods would be slightly faster because of better memory usage.

As noted by @Simon K, you can check more here

How to get length of returned JSON object with Vue JS 3

1 Answers1