issue with unknown values in Vuejs array of objects

Struggling to create an array of objects, but encountering an issue where the first 83 objects are returning as undefined while only the last 4 have the correct data. Despite multiple attempts to refactor the code, a solution remains elusive.

Here is the console log result

And this is the network response obtained from the API

<script>
export default {
    computed: {
        allSales(){
            var i, sales=[], x, y
            for (i = 0; i <= this.salesLists.length; i++) {
                sales[i] = {
                    x:this.date(i+1),
                    y:this.amount(i+1),
                    status:this.status(i+1),
                }
            }
            console.log(sales);// first 83 objects undefined
            return sales
        },
        salesLists() {
            this.$store.state.sale.sales
        },
    },
    methods:{
        date(id) {
            return this.salesLists.filter(sale => sale.id === id).map(sale => new Date(sale.updated_at).toISOString().slice(0,10))[0];
        },
        amount(id) {
            return this.salesLists.filter(sale => sale.id === id).map(sale => sale.amount)[0];
        },
        status(id) {
            return this.salesLists.filter(sale => sale.id === id).map(sale => sale.status)[0];
        }
    }
}

Answer №1

Upon reviewing your second screenshot, it appears that the elements in your salesLists have ids that exceed 87 or the length of the salesLists array. This poses a problem because your for loop assumes that each element in the array has an id between 1 and salesLists.length.

As a result, there are multiple iterations in the loop where the date, amount, and status functions return undefined.

My suggestion would be to transform the salesLists array directly within the computed method using a single map call. Here's an example:

allSales(){
  return salesLists.map(sale => {
    return {
      x: new Date(sale.updated_at).toISOString().slice(0,10),
      y: sale.amount,
      status: sale.status
    }
  })
},

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

Utilize React Helmet for Dynamic Page Titles

Currently, I am utilizing Gatsby with react-helmet to manage the title and meta tags in the head of my website. However, I am eager to find a way to also display this title in the actual text of the page through a global <Header /> component. In proj ...

Even after modifications to the formGroup control, the value remains null when using ng-select, unless the searchTerm is provided programmatically

I need to programmatically set the value of the searchTerm using a virtual keypad, and the dropdown should display options based on the searchTerm. The form control is set to updateOn:'blur'. However, I am facing an issue where the form control ...

What is the purpose of the "Dot" symbol in the "runtimeArgs" property of the launch.json file in Visual Studio Code?

As I opened my Visual Studio Code today, a notification greeted me about a new update. Without hesitation, I went ahead and installed it, assuming it would be like any other update I've had in the past. However, after updating to version 1.22.1, I enc ...

personalizing material-ui component styles – set select component color to be pure white

I am looking to implement a dropdown menu using material-ui components (refer to https://material-ui.com/components/selects/). To do so, I have extracted the specific component from the example: Component return <div> <FormControl variant="outli ...

Post response not being received by Node.js Express static file on the client side

Greetings all, I'm currently delving into mobile development and seeking to expand my knowledge of the Node.js runtime. As part of my learning process, I have a simple client-side "app" written in JavaScript that I am attempting to integrate with a No ...

Document ready not functioning properly for redirects

My code below seems to have an issue as it is not directing to the link specified. <html> <head> <script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script> <script type=" ...

Discover the position within a two-dimensional array

Suppose I have an array that contains objects, and each object has its own id property. In this case, I can find the index by writing: data.findIndex(x=>x.id === newData.id); Now, if data is an array of arrays of objects, how can I efficiently get two ...

React Navigation with Vuetify Button for Menu Bar

I'm currently working on a website and I was trying to customize the styling of v-btn to resemble an active link. While I managed to achieve some success, the background of the button isn't changing correctly. Instead, only the text is getting hi ...

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content. These divs are expected to: 1) Be dis ...

Injecting Vibrant Lines into Browser Using three.js

My current project involves drawing colored lines in a browser without using meshes. I am retrieving data from a MySQL database where geometry and other attributes are stored, and then converting this data into text blocks that create individual line objec ...

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? https://i.sstatic.net/euoNI.png I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The ...

Instructions for resolving the Sys.ArgumentTypeException error: The object of type 'Object' cannot be converted to type 'Function'

I encountered a specific error in my JavaScript function that I'm struggling to resolve. Uncaught Sys.ArgumentTypeException: Sys.ArgumentTypeException: Object of type 'Object' cannot be converted to type 'Function'. Parameter name ...

Error message: "Vue3 JSX files are throwing a ReferenceError because React is not defined."

Currently, I am working on integrating storybook with antdv. However, when importing a tsx file that contains jsx within the button.stories.js file, I encountered an error stating "ReferenceError: React is not defined". You can view the error here. It is i ...

Mediawiki functionality experiencing issues within iframe display

Currently, I am working with MediaWiki built in PHP. Due to certain reasons, I have to embed this application within an iframe. All functionalities are running smoothly except for the Edit link for pages. The issue arises when I try to access the second li ...

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

The term "GAPI" has not been declared or defined within the Svelte

Encountering an issue while trying to incorporate the Youtube data API into my Svelte application. Upon loading the site, the error message displayed is: Uncaught ReferenceError: gapi is not defined Reviewing the relevant code reveals: <svelte:head> ...

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

Encountering a problem with displaying error messages in an empty text field

I am facing an issue with displaying error messages when a text field is left blank. I would like a simple message, such as "can't be empty", to appear below the text field in red color when the user clicks the submit button and leaves multiple fields ...

How can you check the status of a user in a Guild using Discord JS?

Is there a way to retrieve the online status of any user in a guild where the bot is present? Although I can currently access the online status of the message author, I would like to be able to retrieve the online status of any user by using the following ...

Struggling with organizing my code in node.js - it's all over the place and not very reliable. How should I tackle this

Can anyone help me troubleshoot an issue I'm facing with code that writes to the console late or in random order? var request = require('request'); var vFind = 'HelloWorld'; var vFound = false; var vSites = ['http://www.youtu ...