In search of a VueJS Getter that specifically retrieves the values of the final JSON property and displays them as an array

I am currently using a Django REST API to transmit data to a VueJS front-end for display purposes. My goal is to showcase daily counts through a ChartJS graph.

import { HorizontalBar } from '../BaseCharts'

export default {
  extends: HorizontalBar,
  data() {
    return{
    }
  },
  mounted () {
    /* The API call for fetching chart data needs to be implemented here. */
    this.$store.dispatch("DailyCountAction")

this.renderChart({
  labels: [this.$store.state.DailyCount],
  datasets: [
    {
      label: 'Existing Patients',
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
      'rgba(255,99,132,1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
  ],
  borderWidth: 1,
      data: [4,8,2,]
    },

The "label" field in the code snippet above retrieves the data:

 {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "2",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2062019"
    },
    {
        "Check_In_Count": "4",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "6",
        "Cancelations": "0",
        "New_Patient_Count": "1",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2072019"
    },
    {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "9",
        "Cancelations": "0",
        "New_Patient_Count": "0",
        "Existing_Patient_Count": "7",
        "Current_Cycle_Date": "2082019"
    },
    {
        "Check_In_Count": "8",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "1",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "4",
        "Current_Cycle_Date": "2092019"
    },

My objective is to extract only the Current_Cycle_Date values and convert them into an array to populate the "labels" field. I'm uncertain about the approach to achieve this.

The expected format for the "labels" field should be: labels: ['2092019', '2082019', '2072019', '2062019']

I have attempted using MAP functions in getters without success. Would it be feasible to achieve this using a Method with conditional logic?

Any suggestions or guidance on resolving this issue would be highly appreciated!

javascriptdjangovue.jsvuex

Answer №1

Perhaps one way to handle it is to return the data as an array:

const info = [{
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "2",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2062019"
    },
    {
        "Check_In_Count": "4",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "6",
        "Cancelations": "0",
        "New_Patient_Count": "1",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2072019"
    },
    {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "9",
        "Cancelations": "0",
        "New_Patient_Count": "0",
        "Existing_Patient_Count": "7",
        "Current_Cycle_Date": "2082019"
    },
    {
        "Check_In_Count": "8",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "1",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "4",
        "Current_Cycle_Date": "2092019"
    }]

var cycleDates = info.map( item => item.Current_Cycle_Date )

console.log( cycleDates )

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

Using Vue.compile in Vue 3: A beginner's guide

Is there a way to utilize Vue.$compile for compiling functions in Vue 3 runtime? I have previously used this function in Vue 2, an example being: Vue.compile('<custom-component />'); ...

vue.jsvuejs3

Issue with UseState causing a re-render not to be triggered

My orders list state works perfectly on the initial update. However, when an order in the database gets updated, the order list is updated but fails to trigger a re-render even with <...> const [orders, setOrders] = useState([]); useEffect(( ...

javascriptreactjsreact-hooksstate

Looking to utilize Axios in React to make API calls based on different categories upon clicking - how can I achieve this?

My current issue involves making an API call upon clicking, but all I see in my console is null. My goal is to have different API categories called depending on which item is clicked. const [category, setCategory] = useState(""); useEffect(() => { ...

javascriptreactjstypescriptaxios

Managing User-Triggered Requests in Ajax and JavaScript

Currently experimenting with some Ajax code, I have created a scenario to illustrate my issue. I am reaching out to experts for a possible solution, thank you. Scenario: There is an HTML button as follows: <p onclick="ajax_call();">Click</p>. ...

javascriptphpajax

Struggling to grasp the syntax, trying to invoke a JavaScript function using an input button

I'm really struggling to grasp the xhtml syntax involved in calling a function with an input button. Despite my efforts to find a clear explanation, this concept still eludes me. Within the snippet of code from my book that I've been referencing ...

javascriptxhtmldom-events

Which JavaScript framework tackles the challenges of managing asynchronous flow, callbacks, and closures?

I have a strong aversion to JavaScript. I find it to be quite messy and disorganized as a language. However, I recognize that my lack of proficiency in coding with it may contribute to this perception. These past few days have been incredibly frustrating ...

javascriptjquerymongodbtwitter-bootstrapflask

Tips for controlling the size of a textarea in jQuery to prevent it from expanding further

How can I prevent the textarea size from increasing in jQuery? I created a demo where the user can only press 8 enters and enter up to 700 characters. However, my logic fails when the user first presses 7 enters and then starts writing text. The text appe ...

javascriptjquery

Omitting authentication request in Laravel Echo server CLI on the server

Everything runs smoothly on my local machine, but for some reason it's not working on the server. Image from my local environment Image from the server I am using Laravel 5.8 and Vue.js. The domain is HTTPS encrypted. ...

laravelvue.jssocket.iolaravel-echo

Tips on retrieving Bootstrap selectpicker value by using loops in Jquery

I am attempting to perform a basic validation using jQuery, where I need to iterate through all elements to check for the existence of values. The validation script is working well except for the jQuery selectpicker functionality. Here's what I have t ...

javascriptjquerybootstrap-selectpicker

Update the color of navigation items to reflect their active status

Here is the snippet of HTML code: <header> <nav> <a href="#" id="menu-icon"></a> <ul> <li><a href="#"">Home</a></li> <li><a href="#">About</a></li> & ...

javascripthtmlcss

Exploring the intricacies of logic through the interactive features of .hover and .click in tandem with Raphael

My goal is to create a hover effect and a click state for a specific area on a map. At present, I want one color to appear when hovering, and another color to display when clicked. Ideally, I'd like the click color to remain even after the user moves ...

javascriptjquerysvgraphael

What is the best way to handle multiple axios calls with pagination in a React application?

Discussing React Pagination and Handling Multiple Axios Calls In my current project, I am faced with the challenge of mapping through an array of numbers and making sequential API calls for each one. The API I'm working with returns paginated results ...

javascriptreactjsecmascript-6paginationaxios

How does the 'snack bar message' get automatically assigned without being explicitly defined in the 'data' function?

As a novice in web development and Vue, I am currently engaged in a simple project using Vuetify with Vue.JS 3. Within one of my views, there is a table that triggers a message and fetches status to display a snackbar to the user: methods: { async fetc ...

javascriptvue.jsvuejs3vuetify.js

Issue encountered while compiling ReactJs: Unexpected token error found in App.js

I executed the commands below. npx create-react-app github-first-app npm install --save react-tabs npm i styled-components npm install git-state --save using the following code files App.js import React from "react"; import Layout from " ...

javascriptreactjs

Mysterious Loop in JavaScript Unfolding with Three.Js

In order to expand my knowledge of Angular and Three.Js, I am currently working on a prototype SPA that showcases different 3D elements rotating. There are several Angular templates accessible through a navigation menu, each displaying unique rotating elem ...

javascriptjqueryangularjsthree.js

Date Range Selection Widget malfunctioning when used within a popup modal

Having trouble with integrating the rsuite daterangepicker and antd's daterangepicker into a React Material UI Dialog/Modal. The date picker popup seems to either not show up or appear outside of the modal window. Take a look at the image below: Clic ...

javascriptreactjsmaterial-uimodal-dialogantd

Is it possible to assign a deconstructed array to a variable and then further deconstruct it?

Is there a way to deconstruct an array, assign it to a variable, and then pass the value to another deconstructed variable all in one line of code? Take a look at what I want to achieve below: const { prop } = [a] = chips.filter(x => x.id == 1); Typic ...

javascript

Transforming the setting into redux using setTimeout

I am currently working with the following context: interface AlertContextProps { show: (message: string, duration: number) => void; } export const AlertContext = createContext<AlertContextProps>({ show: (message: string, duration: number) =&g ...

javascriptreactjstypescriptreduxreact-redux

Generate an entity based on a written description that signifies the name of the class

Is it possible to store the output of type(...) in a string? I have a class that I created: type(...) -> <class 'apps.X.Y.Z.Listings'> I have saved this as a text but now I want to use it to create an object. I tried using exec, but it ...

pythonpython-3.xdjango

What is the correct way to navigate data through my Node.js API?

I am struggling with getting the JSON response to display at the /api/orders_count endpoint. Here is a breakdown of my setup: In my project, I have various files: Routes file - where the orders_count route is defined: routes/index.js const express = req ...

javascriptnode.jsapinode-fetch