Angular JS manifesting a nested JSON filter system

As a newcomer to AngularJS, I am trying to implement a filter in my ng-repeat. Here is the structure of my JSON data:


var data = [
    {name:test1,b1:{lastValue:0},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}}
    {name:test2,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
    {name:test3,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]

I have attempted to apply a filter based on the lastValue property, using the following code:

ng-repeat = "d in data | filter:{*.lastValue:filterStatus}"

filterStatus // contains the selected filter value, however, it doesn't seem to work

Despite looking for solutions online, I have been unable to find a working solution. Any help would be greatly appreciated.

javascriptangularjsjson

Answer №1

<input ng-model="statusFilter" type="text">

Make sure your statusFilter accurately captures the model value.

ng-repeat = "item in items | filter:statusFilter"

Answer №2

var app = angular.module("Profile", []);
app.controller("ProfileCtrl", function($scope) {
  $scope.filter_val = {}
  $scope.data = [{
    name: 'test1',
    b1: {
      lastValue: 0
    },
    index: 'b1'
  }, {
    name: 'test2',
    b2: {
      lastValue: 6
    },
    index: 'b2'
  }, {
    name: 'test3',
    b3: {
      lastValue: 6
    },
    index: 'b3'
  }, {
    name: 'test4',
    b4: {
      lastValue: 0
    },
    index: 'b4'
  }, {
    name: 'test5',
    b5: {
      lastValue: 89
    },
    index: 'b5'
  }, {
    name: 'test6',
    b6: {
      lastValue: 68
    },
    index: 'b6'
  }]
  $scope.own_filter = function(val) {
    if (!$scope.filter_val.value)
      return true;
    else {
      return (String(val[val['index']]['lastValue'] || '').indexOf($scope.filter_val.value) != -1)
    }

  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
  <input type="text" ng-model="filter_val.value" placeholder="Enter Last Value">
  <div class="row" ng-repeat="event in data |filter:own_filter track by $index ">
    <h4>{{'Name : ' + event.name}}------{{'Last Value : '+event[event['index']]['lastValue']}}</h4>
  </div>
</body>

Answer №3

Utilize the {$:filterStatus} syntax for this task:

angular.module('app', []).controller('ctrl',function($scope){
  $scope.data = [
    {name:'test1',b1:{lastValue:1},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}},
    {name:'test2',b1:{lastValue:2},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}},
    {name:'test3',b1:{lastValue:3},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
  ]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <input type='number' ng-model='filterStatus' ng-init='filterStatus=1'>
  <ul>
    <li ng-repeat='item in data | filter: {$:filterStatus}'>{{item.name}}</li>
  </ul>
</div>

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

What is the proper location to insert CSS within Laravel?

What is the recommended location for storing CSS or JS files in Laravel? More specifically, what are the differences between placing CSS files in /public versus /resources/css? Which directory is preferable for storing my CSS files? ...

javascriptphpcsslaravel

Issue when sending PHP Papa Parse object through AJAX

I am currently working on extracting a CSV local file in PHP using AJAX and have found success with Papa Parse. However, I am facing difficulties passing the results with AJAX. Despite trying various methods such as JSON.stringify, passing only the first f ...

javascriptphpajaxpapaparse

Unique response style depending on the URL provided

Is there a way to allow users to choose between requesting .xml or .json responses when utilizing a rest API request to the server, similar to how Twitter operates? I believe that there must be a more efficient method to enable either .xml or .json respon ...

jsonrestslimfile-type

Building Vertical Tabs with external JS for loading custom visuals

I am trying to figure out how to display the visuals I created in an alternate page within my Vertical tabs. The tabs are already styled, and I have omitted the CSS due to its length. The HTML file I am working with is test.html, and the visuals are in the ...

javascriptangularjs

I am endeavoring to send out multiple data requests using a function, ensuring that the code execution occurs only once all the results have been received

After reading through a post on Stack Overflow about handling multiple AJAX calls in a loop (How to take an action when all ajax calls in each loop success?), I was able to come up with a solution. I decided to track the number of requests I needed to make ...

javascriptjqueryajax

The communication breakdown between Jquery and PHP caused a malfunction

Apologies for the questions, but I am stuck on this minor issue. Being a rookie has its effects :) I have a JSON format representing a list of games with rounds and player information for each round. In this example, only 1 game with 3 rounds is shown: { ...

phpjqueryjson

Converting multiple WordPress plugins into a single JSON option

Having a plugin with numerous options, I am utilizing an angular application on the frontend to display them all. In order to store these options in the database as JSON data, I need to ensure that all 10 options are saved within a single row in the wp_opt ...

phpjsonwordpress

react-responsive-carousel: setting a specific height for thumbnail images

After setting a fixed height for the image, I noticed that the same height is also being applied to the thumbnails. How can I avoid this issue? <Carousel width="600px" dynamicHeight={false}> {data?.book?.images.map((image, i) => ( ...

javascriptcssreactjscarouseltailwind-css

What possible reason is causing ag grid to overlook the defaultExcelExportParams option that was provided?

Here is my React ag grid code snippet. I'm trying to implement the processCellCallback function, but unfortunately, I am not seeing the console.log output in the browser console when exporting excel. Any suggestions on what might be causing this issue ...

javascriptreactjsexcelag-grid

Step-by-step guide on mocking a method within a method using JEST

Currently, I am facing a challenge in unit testing a method named search. This method consists of three additional methods - buildSearchParameter, isUnknownFields, and readAll. I am looking to mock these methods but I am uncertain about the process. Can ...

javascriptnode.jstypescriptunit-testingjestjs

Understanding how to decode querystring parameters within a Django view

In the application I'm working on, there is a search form that utilizes a jQuery autocomplete plugin. This plugin processes the querystring and sends back the suggested item using encodeURI(q). For example, an item like Johnny's sports displays ...

javascriptpythondjango

Exploring the Power of Constants in Karma and Jasmine for Enhanced Performance

To sum it up: I prefer storing hard-coded values in a separate file for reuse across multiple test specifications. Explaining further: Currently following the AngularJS tutorial, I am aiming to write more organized code. In step 5, they mention using hard ...

angularjscoding-stylejasminekarma-runner

Accessing an array outside of an Ajax call that was initiated within a success callback

I have a CSV parsing function written in JavaScript that extracts movie names from a CSV file using an Ajax call within a loop. movies = new Array(); for (var i = 1; i < allData.length; i++) { var mName = allData[i][0]; var mPath = allData[i ...

javascriptarraysajax

Voice crashes in Discord.js after the audio has been playing for a short while

Every time I try to play a song, the bot crashes and gives an "aborted" error message after about a minute. music = { "resource": createAudioResource(ytdl(parameters[0], {filter: "audioonly"}), {inputType: StreamType.Arbit ...

javascriptnode.jsdiscord.js

Experiencing issues with obtaining req.params.id undefined while initiating a put request

Encountering an issue while making a PUT request using Postman, as an error occurs in the VSCode terminal with the message: let product = await Product.findById(req.params.id); ^ TypeError: Cannot read property 'id' of undefined. The request ...

javascriptnode.jsmongodbexpressmongoose

NextRouter does not have a property called "refresh"

Here is the provided code snippet: "use client"; import { useRouter } from "next/router"; import { useState } from "react"; export default function CreatePrompt() { const [title, setTitle] = useState(""); const ...

javascriptreactjstypescriptnext.js

Managing the output from a function: Tips and strategies

Below is the function I am currently working with: function kontrola(){ var jmeno = self.document.forms.newPassForm.user.value; $.get("checkMail.php?mail="+jmeno, function(data){ if(data=='1'){ alert('Tento ...

javascriptjqueryreturn

The datepicker is functioning correctly, however, the displayed value does not reflect the updated date

The version of angularjs being used is 1.5.11. Within my .NET MVC project, the bs-datepicker element from angularjs is incorporated. Featured below is the datepicker component accompanied by a pair of images functioning as buttons within my application: & ...

angularjstypescriptrazordatepicker

"Exploring the power of Angular's translation capabilities paired with

I'm currently working on translating a multistep form using Angular Translate and routing with ui-router. Everything seems to be functioning properly except for one issue. Below is the snippet of my code: Translation Setup: .config(function ($t ...

javascriptjsonangularjsangular-translate

Utilize the json_encode() function to convert a value into its JSON representation within a PHP file

I require assistance in utilizing json_encode() correctly to retrieve a JSON representation of a value within my PHP server script. From what I have learned, this cannot be achieved through echo, print, or loops, as discussed in other sources I've res ...

phpjsonfine-uploader