JavaScript - Attempting to Add Objects to Array Unsuccessful

After seeing this question raised multiple times, I am determined to find a solution. In my current project, I am tasked with displaying a list of orders and implementing a filter by date functionality. However, I keep encountering an error when trying to push each filtered order into a new array:

"TypeError: filteredOrders.push is not a function"

I've attempted to adjust the syntax for pushing objects into arrays but have had no success so far. Each order is returned as an Object, and I am looping through an array of objects. Here's a clearer example of my code:

data: function () {
    return {
        isFilterShown: false,
        IsOrderDetailShown: false,
        selectedDateFrom: new Date(),
        selectedDateTill: new Date(),
    }
},

methods: {
    applyFilter: function () {
        let dateFrom = this.selectedDateFrom;
        let dateTill = this.selectedDateTill;
        let filteredOrders = Array;

        this.orders.forEach(function (order) {
            if (order.createdAt >= moment(dateFrom).format('DD-MM-Y') && order.createdAt <= moment(dateTill).format('DD-MM-Y')) {
                console.log(order.createdAt, order);
                return order;
            }
            filteredOrders.push(order);
        })
        // this.orders = this.filteredOrders;
        this.isFilterShown = false;
    },

Console screenshot: https://i.stack.imgur.com/8Neb0.png

Answer ā„–1

List is not just a variable, it's a method that can be used to manipulate data. This code snippet

let revisedList = List;

doesn't create an empty list. Instead, it assigns the List method to the variable revisedList. To actually create an empty list, you should use

let revisedList = [];

Answer ā„–2

The Task at Hand:

let filteredOrders = Array;

This is simply a function and does not create a constructor function. You can instead use the following:

let filteredOrders = new Array(); 
or 
let filteredOrders = [];

This will allow you to utilize the Array methods effectively.

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

Is there a way for me to acquire the Amazon Fire TV Series?

I'm currently working on developing a web app for Amazon Fire TV, and I require individual authorization for each app. My plan is to utilize the Amazon Fire TV serial number for this purpose. However, I am unsure how to retrieve this serial using Jav ...

Waiting for VueX to execute the mutation

Can VueX be used to create a method in the mounted() function that waits for a mutation in another component to be executed? Sometimes this mutation is triggered before and other times after, so I am curious if it's possible to await its execution af ...

Showcasing data from JavaScript, PHP, and MySQL in an organized list

I am having trouble displaying data from MySQL using PHP and JavaScript. I have successfully displayed the data on the page but am facing issues sending it to the script. Below are my files: script1.js $(document).ready( function() { done(); }); functi ...

Is there a comparison you can make between v-for and a similar feature in Stencil? (such as a functionality akin to v-for

When working with arrays in Stencil, I need to repeat a specific element multiple times based on the array. In Vue, I typically use v-for for this purpose, but what is the equivalent in Stencil? ...

Incorporate the newest version of SASS in your Nuxt project using the @

Currently, I am implementing Sass into my project. I have successfully installed "node-sass" and "sass-loader", allowing me to utilize imports, variables, and other features of Sass. However, I am encountering an issue with using "@use" to employ a @mixin ...

HTML stops a paragraph when encountering a script within the code

Everything in my code is working correctly except for herb2 and herb3, which are not displaying or utilizing the randomizer. I am relatively new to coding and unsure of how to troubleshoot this issue. <!DOCTYPE html> <html> <body> ...

Exploring related models in the MEAN stack journey

Iā€™m currently working on setting up a model association in MEAN framework where an Epic can have multiple Tasks associated with it. I typically create the Epic first and then link it to tasks when creating them. The task data model is structured as follo ...

Is it time to execute a mocha test?

Good day, I am currently exploring the world of software testing and recently installed Mocha. However, I seem to be encountering an issue with running a basic test that involves comparing two numbers. Can someone please guide me on why this is happening a ...

Master the art of returning two functions within a single function in Javascript with NodeJS and ExpressJS

Currently, I am facing an issue where I need to combine two objects and return them in one function. The challenge lies in the fact that both objects have almost identical properties, but different values. To tackle this problem, I created two separate fu ...

Ways to choose an element when all classes are identical but the text content varies?

I'm looking to automate the website, specifically by selecting the Widgets section and clicking on it. The issue is that all the cards have the same class name, only the text inside them differs. I tried using this code snippet: get getWidgetButton() ...

EJS.JS Error: Unable to find the title

I'm facing an issue with a script in express. I have a function that renders a view upon the success of another function. This project involves angular, node, express, and ejs as the view engine. However, when I try to render the view, I encounter an ...

Is there a way to conceal an element using identical markup with jquery?

Having trouble with two custom dropdown lists that share the same markup. Ideally, only one should be visible at a time. However, both are currently opening simultaneously. Additionally, I need them to close when clicking outside of the list. It's ne ...

Having trouble with Electron nodeIntegration functionality and experiencing some odd behavior in general with Electron

Having just started working with Electron, I find myself encountering some puzzling behavior that has me stumped. Here's a quick summary of the issue: I am unable to establish communication between Electron and the HTML "Uncaught ReferenceError ...

Is there a way to use regular expressions to search for class names within nested div elements?

I'm struggling to find nested divs like these in my document object model (DOM) <div class="two-columns some-other-class"> <div class="two-columns some-other-class"> </div> </div> I attempted to search for neste ...

VueJS: Transforming Date Formats from Backend to Frontend

I have a scenario where I need to format a date retrieved from the backend before displaying it on the frontend. The data is being presented in a table structure as shown below: <vue-good-table :columns="columns" :rows="formatedItems" : ...

Fade out the notification div when the user clicks anywhere outside of it

I am currently working on a website with a notification feature. When the user clicks on the notification button, a notification box will appear at the bottom of the button. I would like the behavior of this notification to be similar to Facebook's - ...

Refresh information by clicking on the data input

Essentially, I have a jsp file with a form and a hidden div structured like this: <div style="visibility:hidden;" id="popup"> //several input </div> <form> //several input </form> Both the div and form tags contain the sa ...

An error occurred when attempting to use the getDoc() function from Firebase within Next.js: TypeError - reading 'map' on properties of undefined

Hello everyone at StackOverflow, I ran into a problem while attempting to use .map() on a getDoc() constant in my Next.js application. The error message I'm getting is: "TypeError: Cannot read properties of undefined (reading 'map')". As a n ...

A method designed to accept an acronym as an argument and output the corresponding full name text

Having trouble with my current task - I've got an HTML file and external JS file, and I need a function that takes an element from the 'cities' array as input and returns a string to be used in populating a table. I've set up a functio ...

During the build process, Next.js encounters difficulty loading dynamic pages

My Next.js application is utilizing dynamic routes. While the dynamic routes function properly in development mode, I encounter a 404 error when deploying the built app to Netlify. https://i.stack.imgur.com/45NS3.png Here is my current code setup: In _ ...