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

Converting a text file to JSON in TypeScript

I am currently working with a file that looks like this: id,code,name 1,PRT,Print 2,RFSH,Refresh 3,DEL,Delete My task is to reformat the file as shown below: [ {"id":1,"code":"PRT","name":"Print"}, {" ...

Need to monitor a Firebase table for any updates

How can I ensure my Angular 2 app listens to changes in a Firebase table? I am using Angular2, Firebase, and TypeScript, but the listener is not firing when the database table is updated. I want the listener to always trigger whenever there are updates or ...

Embarking on the journey of transitioning code from server-side to client-side

Currently, I am looking to transition the code behind section of my asp.net web forms application to client-side ajax or javascript - still deciding on which route to take. The main goal for this change is to ensure that the application remains functional ...

Node.js & Express: Bizarre file routes

It's quite strange how my local paths are functioning. Let me show you an example of my directory structure: public > css > bootstrap.css public > js > bootstrap.js templates > layout > page.ejs (default template for any page) tem ...

How can I effectively assign model data to a service property in an AngularJS controller?

I have established a service to facilitate the sharing of data/state across multiple controllers. One of the controllers updates certain properties within the service using scope data through a save function. The updated data is then accessed by other cont ...

Checking for Age Validity with Formik and Yup: How to Ensure a Date Represents Someone Who is Eighteen Years Old or Older

I'm currently working on a form using Formik, Yup, and ReactJS. Specifically, I am focusing on the date field validation to ensure that the user is at least 18 years old. Within the validationSchema parameter in Formik, I have included the following c ...

Visual traceroute, like the one on "yougetsignal.com", provides a way to update a div element either on demand or periodically

This is my very first question on a forum, yay! I will do my best to ask clearly and concisely. I am currently working on creating a visual traceroute similar to the one found on yougetsignal.com by Kirk Ouimet. My project is up and running using bash co ...

Parsing and Displaying JSON Data from a Python DataFrame in D3

Trying to create a stock chart, I encountered an issue with parsing the json file output by my python dataframe. The example code from http://bl.ocks.org/mbostock/3884955 does not seem to fit the format of my data: The json looks like this: var dataset = ...

Matching dynamic routes with a slug and number in vue.js is a powerful feature that

Seeking assistance with creating a route pattern for eShop product slugs. The URLs in question are as follows: http://example.com/product/product-title-51 http://example.com/product/another-product-title-137 http://example.com/product/another-product-45-t ...

Utilizing JavaScript text variables as hidden inputs

My JavaScript code is responsible for populating a modal from various sections of a website. Essentially, when the modal expansion button is clicked, it collects all data associated with that particular button press. While this functionality works flawles ...

"Using Node.js Express 4.4 to efficiently upload files and store them in a dynamically

Looking for recommendations on the most efficient method to upload a file in node.js using express 4.4.1 and save it to a dynamically created directory? For example, like this: /uploads/john/image.png, uploads/mike/2.png ...

Several directories for viewing in Node.js with Express

I have been researching different solutions, but I am still unsure about how to effectively integrate Express with multiple view folders. Imagine an Express application divided into distinct parts, each organized in its own subfolder: app +partA + ...

Executing Python script via AJAX or jQuery

I need to execute Python scripts from JavaScript. The goal is to provide an input String to the Python script as an argument and then showcase the output on our webpage. Below is the Python code that runs smoothly on my Linux box: ./sample.py 12345 produc ...

What are the steps to modify or remove a node in react-sortable-tree?

I am currently working on implementing a drag and drop tree view using react-sortable-tree. Along with that, I also need to incorporate CRUD operations within the tree view. So far, I have been successful in adding, editing, and deleting nodes within the p ...

Assistance needed with sending JSON data to a PHP server using the POST method

I am attempting to transfer JSON data from an HTML form to a PHP server using the POST method. The issue I am encountering is that my code always ends up in the fail block within the callback function. Despite this, the Firebug console (ctrl+shift+J) does ...

What is the process of creating a MaterialUI checkbox named "Badge"?

Badge API at https://material-ui.com/api/badge/ includes a prop called component that accepts either a string for a DOM element or a component. In my code: <Badge color="primary" classes={{ badge: classes.badge }} component="checkbox"> <Avatar ...

Utilizing jQuery and DOM to interact with form elements

Below is the form content <form method="post"> <input type="hidden" name="resulttype" value="Create"> <table> <tr> <td>Full Name</td> <td><input ...

Console.log is displaying array as [object Object] when utilizing Typescript

When working with an object in typescript called "obj," I encountered a strange behavior. Initially, when I ran the console.log(obj); command, the output in the terminal console was displayed as [object Object]. However, after wrapping it in JSON.stringify ...

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

Is there a way to automatically advance to the next question in Surveyjs without needing to click the Continue

I'm currently integrating SurveyJs into my web application. The first 3 pages of my survey contain HTML elements that I would like to automatically slide after a few seconds, similar to the functionality on the following sample site using SurveyJS: O ...