Filtering JSON data in AngularJS is simple and effective

I am working with JSON data and I want to display it filtered by genre. The solution provided in the previous question How to filter JSON-Data with AngularJs? did not work for me.

Here is myapp.js:

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

myApp.controller('myApp', function($scope) { 

$scope.isoffice = function(apps) {
    return apps[0].genre === "office";
};

$scope.apps = [
    {
        "id": "stardict",
        "genre": "aksesoris", 
        "name": "Stardict"
    },
    {
        "id": "libreoffice",
        "genre": "office", 
        "name": "LibreOffice"
    }];
}

And here is my index.html:

<div ng-repeat="app in apps | filter:isoffice">
  {{apps[0].name}}
</div>

Am I missing something? Any help would be appreciated. Thank you!

Answer №1

To filter without using a comparator function, you can simply do the following:

<div ng-repeat="app in apps | filter:{genre:'office'}">
  {{app.name}}
</div>

It's important to note that app.name is used here to display the current app being generated by ngRepeat. If multiple entries match your filter, apps[0].name will repeatedly display the first entry.

Check out the demo on JsFiddle here

If you prefer to use a comparator function instead, you can implement it like this (remember, only one object is sent in each time so don't reference it as an array):

$scope.isoffice = function(apps) {
   return apps.genre === "office";
};

View the comparator demo on JsFiddle

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

How to hide an image in the React carousel display

I am having an issue with my Carousel, specifically with the image not being displayed even though I have set up the data in a const called items. Here is how my const looks: var items = [ { url:'../../assets/img/hors1.jpg', ...

Grails is experiencing a surge of duplicate events being triggered simultaneously

In my _test.gsp layout, I have a 'click event' that is triggered when the layout is rendered as shown below. <div id="testid"> <g:render template="test"/> </div> When I click on the event in the _test.gsp layout, it trigge ...

Unable to retrieve element using jQuery because it is specified by its href attribute. This pertains to

I'm having trouble accessing the "a" element with its href attribute. Specifically, I want to add a class to any element that has an href value of "#one". Check out this jsFiddle example. Using jQuery: // The tabs functionality is working correctly ...

Setting response query correctly in Solr using AJAX

Inspired by an example of using Solr's JSON output for AJAX, I have incorporated a drop-down menu into my project form and introduced faceting to the parameters. Parameters: function getstandardargs() { var params = [ 'wt=json' ...

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements: The client's screen size is unknown (mobile) The image will be user-defined with u ...

Utilizing a child component in React to trigger a function on its sibling component

Trying to put this question into words is proving to be a challenge. I am wondering in React, if there is a way for a child component that is deeply nested (2 levels deep from the parent) to trigger a function on another component that it has a sibling rel ...

Carousel with Bootstrap: Heading positioned over the content

My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...

Tips for implementing ajax and codeigniter to load additional comments on a web page

Is it possible to customize Codeigniter's default pagination to achieve a "viewMore" link style when loading more records using AJAX? The challenge lies in creating a div that automatically expands to handle large numbers of records, such as 10,000 a ...

Leverage GitHub cloning to create my personal project

I'm a beginner when it comes to GitHub. I was wondering if it's feasible to take an entire code from GitHub and customize it to create a different product with unique design and added functionality. The specific link I am referring to is https:// ...

What is the best way to import assets from an NPM-powered package in a PHP composer-based package?

First and foremost, let's clarify that this is not a question about incorporating an NPM package as a dependency of a Composer package. Direct usage of NPM or a composer plugin can easily solve that issue. If we have loaded an NPM package as a depend ...

How can I correctly connect a JavaScript library that has been installed via npm?

After using npm to install a JS library, such as: npm install chartjs The necessary JS file is typically located at ./node_modules/chartjs/chart.js. If you prefer the file to be in a different location, like ./public/js/chart.js, you could manually m ...

Exploring properties of nested elements in React

Picture a scenario where a specific element returns: <Component1> <Component2 name="It's my name"/> </Component1> Now, what I want to accomplish is something like this: <Component1 some_property={getComponent2'sN ...

Discovering if an email is already registered using AngularJS and Spring Boot

After some careful consideration, I believe I am close to resolving my issue but I still require a little bit of fine-tuning. Within my @RestController, I have implemented the following code snippet to verify the existence of a user: @RequestMapping(valu ...

Using Javascript to dynamically add rows to a table, however they mysteriously appear and disappear soon

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserPermisson.aspx.cs" Inherits="TestProjects.UserPermisson" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ...

The issue lies with the Cookies.get function, as the Typescript narrowing feature does not

Struggling with types in TypeScript while trying to parse a cookie item using js-cookie: // the item 'number' contains a javascript number (ex:5) let n:number if(typeof Cookies.get('number')!== 'undefined'){ n = JSON.pars ...

AngularJS updating paginated table with refreshed data following filter application

Here is an example that I am working on: https://jsfiddle.net/3noebzgr/1/ Everything in my project works well, except when I filter by jersey number, the pagination does not update accordingly. For instance, if I filter for jersey numbers 1-3, jersey 1 ap ...

Find the location where the function is declared

Can anyone help me locate the definition of this function: http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#copyObject-property copyObject(params = {}, callback) ⇒ AWS.Request I'm struggling to find where it is defined. Any suggestio ...

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...

What is causing my component to render the count value twice?

This is my main layout component: function MainPage() { return( <div> <MLayout children={<MNavbar custOrFalse={false} />} /> </div> ); } export default MainPage; Here is the child navbar compone ...

"Click events on jQuery's cloned elements are not retained when the elements are removed and appended to a container for the second time

Take a look at this fiddle: https://jsfiddle.net/L6poures/ item.click(function() { alert("It's functioning") }) $("#container").append(item) var stored = item.clone(true, true) function add_remove() { $("#container").html("") $("#conta ...