JavaScript / Vue.js - Accessing the values of all properties in an object

I have an object that contains data on collected trash, dangerous areas, schools, and trash bins with different numerical values. I am looking to retrieve all of these values.

The object provides the following information:

{__ob__: Observer}
  collectedTrashCount: 139
  dangerousAreaCount: 11
  schoolCount: 5
  trashBinCount: 44

To access the value of collectedTrashCount, I would use the following method:

computed: {
    dashboardList: function () {
      return this.$store.getters.getDashboard;
    },
    checkCount: function () {
      console.log(this.dashboardList.collectedTrashCount);
    }
  },

By running console.log as shown above, I would get the result 139.

My question is: How can I retrieve and display all the values from the object, such as 139, 11, 5, and 44?

javascriptarraysperformancevue.jsvuejs2

Answer №1

Using the entries function, you can easily map the values in an array:

calculateTotal: function () {
   return Object.entries(this.dataList).map(([key, value]) => value)
}

Answer №2

An alternative method that does not require mapping is by utilizing the Object.values() function:

const data = {
  totalSales: 50000,
  expenses: 25000,
  profit: 25000,
}
const result = Object.values(data)
console.log(result)

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

Issue with mime-type when uploading a file in a React js application on Windows operating system

In my React application, I have implemented the following HTML code to upload files: <div className="form-group files"> <label>Upload Your File </label> <input type="file" className="form-control" multiple onChange={this.onC ...

javascripthtmlreactjsfile-uploadbootstrap-4

`Vue3 Dockerize - vite: unable to locate``

I have been trying to dockerize my Vue3 project. The Dockerfile is working perfectly, but when I use a compose for development and bring it up, I am encountering a 'vite not found' error. Below is the content of the Dockerfile: # develop stage F ...

dockervue.jsvuejs3vite

How can I transfer data from an API response containing an array of objects to a new array in a Vue.js

How come I am getting NaN instead of "qwe" and "qweqweqwe" when trying to push the first 6 elements from an array of objects to a new array? Imagine the array of objects retrieved from the API is structured like this: 0: {id: 340, name: "qwe", lastname: ...

javascriptarraysajaxvue.jsobject

Tips for choosing a codemirror instance in vue

How can I select one of multiple codemirror instances when I have tried var basicEditor = VueCodemirror.CodeMirror($('#basic').get(0)); without success? Below is the code snippet in question: Vue.use(window.VueCodemirror); Vue.component(' ...

jqueryvue.jscodemirror

Using Vue.js and Django to Retrieve Fields from ForeignKey Objects

I am currently facing an issue with Django Rest Framework and Vue JS where I am unable to retrieve foreignkey fields from the actual model of the api. Specifically, I want to fetch the store name of a particular product. However, when I attempt to call [[ ...

pythondjangovue.js

Fancybox fails to open when clicking on the submit form

I am having an issue with the fancybox not appearing after submitting my form. Below is the code I have for the fancybox: <div class="hidden" id="fancybox-popup-form"> (your Fancybox content goes in here) </div> <style> .hidd ...

javascriptjqueryhtmlfancybox

Sending information from the backend to the frontend using Node.js and Express

I am seeking advice on the most effective method for achieving a specific task. In my Node.Js / Express application, there is a point where I need to send data to the backend and receive a certain value back to the front end. Typically, this can be accomp ...

javascriptnode.jsexpress

Implementing Event Handlers for Multiple Textareas Using Jquery on a Webpage

The functionality of my script is exactly how I want it to be, but I am facing an issue when trying to replicate it on a page. The jQuery code manipulates textarea boxes based on button clicks, however, I now need each textarea box to have its own set of b ...

javascriptjqueryhtmlbindingtextarea

Adding turbolinks to an HTML document can be achieved without the need for a

Recently delving into the world of turbolinks, I discovered that it can be employed independently without relying on a client-side javascript framework. Eager to test this out, I created a bootstrap 4 template and attempted to install it. Firstly, I downl ...

javascripthtmlnode.jsbootstrap-4turbolinks

How can Bootstrap's Collapse be activated without relying on buttons or anchor tags?

Is there a way to activate Bootstrap's Collapse feature when a user selects a Radio button, like this: <input type="radio" name="radios" value="More" data-toggle="collapse" href="#collapseExample"> <div class="collapse" id="collapseExample" ...

javascriptjquerytwitter-bootstrap

Issues with excessive firing of JQuery blur and hide functions

I am currently using jQuery v1.11.2 and have set up a basic JSFiddle at this link (http://jsfiddle.net/k1g3upbv/). The layout may not be ideal in JSFiddle due to the integration of Twitter Bootstrap within my project. I quickly put together the JSFiddle, o ...

javascriptjqueryajax

An issue arose with a circular reference during the serialization of a JSON MVC object

I am trying to follow the instructions provided in this video on Youtube. Here is the code in my controller: public ActionResult loaddatacate() { BBDbModel context = new BBDbModel(); context.Configuration.ProxyCreationEnab ...

javascriptc#jsonasp.net-mvc

Using React to Fetch Data from MySQL Database

I am a new user in the world of React and I am struggling with an issue related to a Select component that fetches values from a MySQL database. The problem is that the select dropdown goes into an infinite loop. I believe the error lies within this file, ...

javascriptsqlreactjsselect

Ways to transfer information to a Jquery Dialog upon its opening

Upon loading the JSP, I want to display a JQuery dialog without requiring the user to click on a button. To achieve this, I am checking for a flag from the bean called showPopupFlag. Additionally, I would like to populate the dialog with some data using di ...

javascriptjqueryjquery-dialog

Display the names of the guidelines for Vue CLI alerts triggered by Prettier

When working on my Vue CLI project, the presets I selected come with rules that alert me about certain issues in my HTML code. The warning message looks something like this: warning: Replace `·title="Publicly·Visible"·:class="{·inactive:·!member.isPu ...

vue.jseslintvue-cliprettier

Laravel accessors are causing the JSON object to duplicate information

Hey there! I've got a model called product, which has a foreign key to a cpu (cpu_id) that belongs to another model containing cpu details. When transforming this product model into a JSON object, I noticed that I only get the cpu_id instead of all th ...

javascriptphpjsonlaraveleloquent

Sending a post request in AngularJS using the $resource API

As a beginner in angularjs, I am working on creating a login form that connects to a REST API URL when the user submits the form. http://XXX/XXX/index.php/report/login/format/json Using PostMan REST client to configure the URL works fine! However, when ...

javascriptangularjshttpangular-services

How to pass parameters down through nested views in Angular UI-router?

Trying to implement nested views loading inside parent views using state children, but unsure if the approach is correct. Progress so far: $stateProvider .state('splash', { url: '/splash', templateUrl: 'system/templates/s ...

javascriptangularjs

Using Vue with Nuxt and Axios for cross-domain POST requests with a proxy

I've been attempting to perform a cross-domain POST request using nuxt and axios this.$axios.$post('https://hooks.zapier.com/hooks/catch/111111/xxxxx/', { name: 'Jose', }) Encountering CORS blocking, I decided to try using nuxt/p ...

javascriptvue.jsaxios

When making an Ajax call, the response is in JSON format when executed locally, but switches to

Whenever I send an ajax request and retrieve data, the response varies depending on where I execute the code. When I test the web page using Visual Studio and inspect the output in developer tools, I see JSON format like {"d":{"__type":"WebService+MyObject ...

javascriptajaxjsonvisual-studio-2010iis