What is the proper way to utilize a filtered object based on its properties within an Angular controller?

Currently, I am working on developing a stacked graph along with its associated table. To retrieve the necessary JSON data, I am utilizing $http.get() and then assigning it to $scope.dataset.

Here's a snippet of the HTML:

<input ng-model="_searchQuery.key1.key2">
<tr  ng-repeat="(key, value) in dataset | filter:_searchQuery ">

My main query is regarding updating $scope.dataset within the controller?

The _searchQuery effectively filters the dataset, seamlessly altering my table. This means no additional coding is required in the controller. Essentially, dataset.key1.key2 corresponds to _searchQuery.key1.key2

However, when it comes to working with the nvd3.js stacked graphs, I found myself needing to apply similar filtering to $scope.dataset directly in the DOM. Attempting 

$scope.dataset = $filter('$scope._searchQuery.key1.key2')($scope.dataset)
resulted in an error. My approach mimics that of Angular documentation as well as insights from this source: How to use a filter in a controller?

javascriptangularjsfilterangularjs-interpolate

Answer №1

Seems like this question may have been asked before: How can I filter an array in AngularJS and use a property of the filtered object for ng-model?

I found a solution that worked for me:

First, I had to initialize $scope._searchQuery as an object in the controller and include its properties.

Secondly, I updated $scope.dataset - using the keyword filter to filter by object property, specifically with _searchQuery.

The following syntax helped resolve the issue: 

$scope.dataset = $filter('filter')($scope.dataset,$scope._searchQuery.key1.key2);

It seems that only two arguments can be passed to $filter, so to filter based on more inputs, I had to duplicate the same line and pass $scope._searchQuery.key1.key3 to it.

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

Eliminate the registration message from TinyMCE by importing a package

Looking to create a TinyMCE React package, I've been using import { Editor } from '@tinymce/tinymce-react'; However, I'm encountering this message - To remove the message, typically you would add the API key to the .js. in your <scr ...

javascriptnpmtinymce

Directive that can be reused with a dynamic item name in ng-repeat

I've developed a reusable directive similar to a dropdown, but this dropdown opens in a modal and is functioning well. The structure of my directive is as follows: <p-select items="deptStations" header-text="Select " text="Select departure..." te ...

javascriptangularjsangularjs-directiveangularjs-ng-repeationic-framework

The map markers are nowhere to be found on the map when using Internet Explorer

Take a look at this code I wrote... var styles = [ { "featureType": "landscape", "stylers": [ {"weight": 0.1}, {"color": "#E7EDEF"} ] }, ... { "featureType": "poi.park", "elementType": "labels", "stylers": [ ...

javascriptgoogle-mapsinternet-explorergoogle-maps-api-3

How to Use jQuery in Thymeleaf to Toggle All Checkboxes

Why isn't the function of selecting and deselecting all fields working correctly for me? Can anyone explain what may be causing this issue? ..... <head> <meta name="viewport" content="width=device-width, initial-scale=1.0&q ...

javascriptjqueryspringspring-thymeleaf

How do you typically approach testing Cloud Code on Parse?

While working on developing a substantial amount of business logic in webhooks like beforeSave/afterSave/etc. using Parse.com, I have encountered some challenges as a JavaScript/Parse beginner. The process seems somewhat tedious and I'm questioning if ...

javascriptandroidiosnode.jsparse-platform

Accessing PHP output within Jquery

Even though I know PHP is a server-side script and JavaScript is client-side, I encountered an issue. I struggled to bypass browser security when making an AJAX request to another domain. Feeling lost, I decided to turn to PHP for help. The challenge I f ...

javascriptphpjqueryjsonajax

Dynamic content modal

Recently, I started exploring react native. In my application, there are 5 buttons on the screen. Each of them triggers the same <Modal>, but the content inside it changes based on the button clicked. For example, if I click the first button, a tex ...

javascriptreactjsreact-native

Using npm-installed cesium for the web browser is a straightforward process that involves importing

Exciting news - Cesium is now available on npm! Once I've run npm install cesium in my project, all the codes are placed inside the node_modules folder. In the introductory hello world example of Cesium, it imports cesium similar to this: <script ...

javascriptnpmcesiumjs

Displaying data-table with only the values that are considered true

Right now, I am utilizing the AgReact table to exhibit data fetched from my endpoints. The data-table is functioning properly, however, it seems to be unable to display false values received from the endpoints on the table. Below are the snippets of my cod ...

javascriptreactjstypescriptag-gridag-grid-react

How to assign various column values to a PHP array in JSON format from a MySQL database

I am struggling with making a JSON Ajax request and receiving an array in return. After browsing through multiple questions, I came across this code snippet that I edited to fit my problem: var hej[]; function ajax_search(){ $.getJSON('test.php ...

phpjavascriptmysqlarraysjson

Determining Adjacency of <li> Elements Using jQuery Sortable() and Class Comparison

I have created a custom display builder specifically for outdoor power equipment dealers. This tool allows them to easily add, remove, and rearrange different product display sections according to their preferences. To achieve this functionality, I utilize ...

javascriptjqueryjquery-ui

Tips for adjusting the speed of animations in Odometer/vue-odometer

Referencing the Odometer documentation at duration: 3000, // Adjusts the expected duration of the CSS animation in the JavaScript code Even though my code is set up like this, the duration parameter doesn't seem to be effective: <IOdometer a ...

javascriptvue.js

Is there a way to reverse a string in Javascript without using any built-in functions?

I am looking for a way to reverse a string without using built-in functions like split, reverse, and join. I came across this code snippet on Stack Overflow (), but I'm having trouble understanding what the code does on the fourth line. I need more cl ...

javascriptarraysnode.jsfor-loop

Retrieve the information from the API and populate the tables with the data

I'm currently working on fetching API data and displaying it in tables, using mock data for now. Successfully implemented actions and reducers. Managed to call the API but encountered an issue with network calls where I see a blocked response content ...

javascripthtmlreactjsreduxmaterial-ui

How can I use Angular forEach to retrieve both the name of a JSON key and its corresponding

Is there a way to retrieve both the key name and value of a JSON object in Angular using the forEach method? var institute = { "courses": [], "user_type": 3, "institute_name": "sd", "tagline": "sd", "overview": "sd", ...

angularjsjson

What is the purpose of making a "deep copy" when adding this HTML content?

My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...

javascriptjqueryhtmlcopyappend

Transferring a JSON object along with a function to the controller of another directive

I am facing a challenge in sending a JSON object with a function template from app.controller to another directive controller. I have chosen to pass this variable as an attribute of the inner directive's element. The issue arises when attempting to ac ...

javascriptjsonangularjs

JavaScript - A simple way to retrieve the dimensions of an image consistently

I'm currently working on a piece of Jquery code that is designed to display an image fitting within the screen's dimensions. These images are generated dynamically as needed. However, I am facing an issue where the height and width of the image a ...

javascriptjquerycss

Stopping Popups in Chrome When Printing with JavaScript

Javascript function printPage(htmlPageContent) { var newWindow = window.open("about:blank"); newWindow.document.write(htmlPageContent); newWindow.print(); } In this code snippet, we are creating a new window 'newWindow' and then using ...

javascriptjquery

What could be causing the TypeError that is preventing my code from running smoothly?

I can't seem to figure out why I'm constantly encountering the error message Cannot destructure property 'id' of 'this.props.customer' as it is undefined.. Despite double-checking my code and making sure everything looks corre ...

javascriptreactjsdebugging