In AngularJS, selecting and transferring certain objects based on specified conditions from one array of objects to another array

I am looking to filter out specific objects from an array based on a condition and create a new array with those filtered objects. Currently, I am struggling with the code snippet provided below:

The goal is to only copy objects from the existing 'orders' array to the 'temp' array where the 'status' key matches 'completed'. However, using angular.copy seems to be copying all objects instead of just the ones that meet the condition.

--------html-----

<body ng-app ="myModule">
    <div ng-controller="myController">    
    <div ng-repeat="order in temp">

    {{order.id}} -- {{order.status}} -- {{order.name}}

    </div>
    </div>
    </body>

-------xxxx------

-------JS----------

<script>


  var myModule = angular.module('myModule', []);

  myModule.controller('myController',  function($scope) {

    $scope.orders = [ 
      {id: '101' , status : 'completed' , name: 'Jacopo' } ,
      {id: '102' , status : 'Rejected' , name: 'Dan' } ,
      {id: '103' , status : 'created' , name: 'Erick' } 
    ] ;

    $scope.temp = [ ] ;

    angular.forEach($scope.orders , function(key,value){ 
      if(key.status == 'completed') {
      angular.copy($scope.orders,$scope.temp)
      }

    } );

  } ) ;

</script>

------xxx--------

Answer №1

To achieve this functionality, you can utilize the Array.filter method:

$scope.filteredData = $scope.items.filter(function(item){return item.type === 'active'});

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

Leverage the power of Bootstrap by incorporating not one, but two carousels on a single page - one featuring a single item per

I have a unique challenge with using multiple Bootstrap Carousels on my WordPress website One of the carousels features one item per slide, while the other carousel has three items per slide, moving one item at a time in a cyclical pattern like this: [1, ...

JavaScript - Transforming an array of strings into individual string elements

After receiving the following input: const myString = "['one', 'two']"; When I use this command: console.log(typeof myString); The output is string. Although it's expected due to the nature of the input, I now need to ...

Exploring the Potential of HttpListener When Integrating with Angular's $http.post, as Opposed to

In simple terms, on my Web Application side, I send some data to a C# Application running an HttpListener. The Listener catches the request, performs an action, and then sends a response back to the Web Application. Below is the Callback Method used when ...

Delay in real-time updates with Axios post in NodeJS and ReactJS

I am facing a peculiar issue with an axios post request. Within an onSubmit function on a react component, I have an axios post that sends a UID and retrieves the count of items associated with that UID in a collection (in this case, items in the basket fo ...

Can the operator pipeline generate interim observables in a manner akin to how filter, map, and reduce generate interim arrays?

I need some clarification regarding the efficiency of operator pipelines in RxJS. Based on my current understanding, each operator within the pipeline receives an observable and generates a new (potentially modified) observable to pass on to the next oper ...

Generate a list of JS and CSS paths for UglifyJS/UglifyCSS by parsing an HTML file

Seeking a tool that can scan an HTML file (specifically a Smarty template file) to extract paths from <script></script> and <link/> tags for use with UglifyJS/UglifyCSS or similar minification tools. Extra credit if it can handle download ...

Guide on utilizing jQuery/AJAX data with PassportJS

When I submit a login request using the form fields action="/login", method="post", everything works smoothly. This is similar to the code examples found either here or here. However, when I attempt to send the same information using jquery/ajax, passport ...

Bot in discord.js refuses to exit voice channel

I've been struggling to get my bot to leave the voice channel despite trying multiple methods. Here's what I've attempted in the source code: Discord.VoiceConnection.disconnect(); Although this is the current code, I have also tested: messa ...

Looking to create a unique color palette using jQuery?

As a beginner in using jquery, I have just completed designing a website that requires a color selector. The client specifically requested a color selector similar to the one used on the website . Can anyone assist me with designing it using jquery? ...

The issue of undefined onclick function in Angular 9 is causing errors

dashboard.component.ts myFunction(){ console.log("test"); } dashboard.component.html <img [src]="team.logo" onclick="myFunction()" alt="img"> Every time the image is clicked, an error pops up in the console saying "Reference error: myFunc ...

Guide on how to smoothly navigate through an HTML page to a specific anchor point

Is there a way to use JavaScript to make the browser scroll the page to a specific anchor? In my HTML code, I have set either a name or id attribute like this: <a name="anchorName">..</a> or <h1 id="anchorName2">..&l ...

AngularJS hide/show tab functionality

Presented here are tabs generated from an array using AngularJS and Bootstrap. My goal is to make it so that when a specific tab is clicked, only the content of that tab is displayed. For example, if I click on "Dynamic-2," I want to see the content relat ...

Imitate a HTTP request

Currently, I am working on developing a front-end application using Angular (although not crucial to this question). I have a service set up that currently supplies hard-coded JSON data. import { Injectable } from '@angular/core'; import { Obser ...

"JavaScript/TypeScript: The Importance of Defining Object Return Types

While going through the Tour of Heroes tutorial for Angular, I found this method of returning an object to be confusing. createDb() { const heroes = [ { id: 11, name: 'Dr Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: &a ...

Unable to dynamically update textbox with dropdown value in Internet Explorer [Using JavaScript]

I am attempting to modify the text in a textbox when a choice is made from a dropdown form element using the onchange() function. While this process works smoothly in Firefox, Safari, and Chrome, it fails to do so in Internet Explorer. Below is the simpl ...

Combine your needs before making a formal request

My HTML contains a POST form with the following structure: Name1 Email1 Address1 When a button is pressed, a new div appears with the same fields but incremented by one. This data is then posted to an express function where a foreach loop fetches the da ...

Error: Unable to access the 'handleClick' property since it is undefined

Currently, I am in the process of learning React and have taken up a small project to apply my knowledge. The aim of this project is to display a list of users from a JSON API, namely `jsonPlaceholder`, and provide functionality to edit the user informatio ...

How can you integrate jquery ajax in WordPress?

Recently, I started learning about jquery and have been following a tutorial on creating instant search using jquery. The tutorial can be found here. Now, I am trying to implement this on my WordPress site, but it seems like things work differently when d ...

Google Chrome extension: Communicating from injected content script to background script

/* My Unique Background Code */ console.log("Initializing the Background ! "); chrome.runtime.onMessageExternal.addListener( (request, sender, sendResponse) => { console.log("A message has been received"); console.log(request); ...

What is the best way to declare constant variables in index.html for Ionic 2?

I am currently working on developing an Android app using Ionic 2. I have declared a variable in the script tag within my index.html file. This constant value is intended to be used in both Ionic 2 pages and providers code. Below, I have included the snipp ...