data: [ {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'offline'}, {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'offline'}, {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'offline'}, ]
I have data similar to this and I need to get the number of online users here and print it on the screen vue js how can I do it? I found it a long way but it didn’t work
Advertisement
Answer
You could use Array.prototype.filter()
to find all the array entries that have status: 'online'
, then return the length of that array:
const onlineUsers = data.filter(x => x.status === 'online') const onlineCount = onlineUsers.length
To show that count in a Vue template, you could compute the result above and use string interpolation syntax (prop name between {{
and }}
):
new Vue({ el: '#app', data() { return { data: [ {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'offline'}, {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'offline'}, {name: 'xxxxx', surname: 'yyyyy', status: 'online'}, {name: 'xxxxx', surname: 'yyyyy', status: 'offline'}, ] }; }, computed: { onlineCount() { return this.data.filter(x => x.status === 'online').length; } }, });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script> <div id="app"> <div>{{onlineCount}} users are online</div> </div>