Exploring Angular's ng-model and filter capabilities with nested data compared to top layer data structures

Question

Exploring Angular's ng-model and filter capabilities with nested data compared to top layer data structures

On my webpage, I have a list of data presented in divs. Each div corresponds to an array of data in my object, which is a common setup.

I am currently working on implementing a text box that will allow me to filter the displayed data as more information is entered into the box. This way, users can quickly narrow down the results shown on the page.

To enable this filtering functionality, I have added a filter to my ngFor directive:

*ngFor="let x of data | filter: filterString"

.

The text-box utilizes ngModel to handle the filtering:

<input type="text" class="form-control" placeholder="Filter..." name="ruleFilter" id="ruleFilter" [(ngModel)]="filterString" (keyup)="onFilter($event)">

However, I am running into an issue where the filter only seems to be effective on the top layer of data within my object. For instance, searching for Omaha works fine because it's at the top level and gets filtered correctly.

But when attempting to search for something like Campus, which is nested inside Attribute, the filter doesn't recognize it, resulting in no matching results being displayed.

Is there a way to configure the model to search through all layers of the object for binding instead of just looking at the top layer (which I suspect is happening currently)?

Update: I have created a plunker showcasing the basic setup of my application: https://plnkr.co/edit/eywuWmPRseUkmVPbTEOf?p=preview

In the provided example, you'll notice that the data model searches by top-level properties effectively but fails to return any results when searching for nested items.

javascript angular typescript

Answer 1

Answer №1

In my understanding of the question, it seems like flattening the data could be beneficial for you:

const flattenObject = function(object) {
    let flattened = {};

    for (let key in object) {
        if (!object.hasOwnProperty(key)) continue;

        if ((typeof object[key]) === 'object') {
            let nestedFlattened = flattenObject(object[key]);
            for (let nestedKey in nestedFlattened) {
                if (!nestedFlattened.hasOwnProperty(nestedKey)) continue;

                flattened[key + '.' + nestedKey] = nestedFlattened[nestedKey];
            }
        } else {
            flattened[key] = object[key];
        }
    }
    return flattened;
};

let newFlattenedData = flattenObject(data);

Original code from: https://gist.github.com/penguinboy/762197

Answer 2

In my understanding of the question, it seems like flattening the data could be beneficial for you:

const flattenObject = function(object) {
    let flattened = {};

    for (let key in object) {
        if (!object.hasOwnProperty(key)) continue;

        if ((typeof object[key]) === 'object') {
            let nestedFlattened = flattenObject(object[key]);
            for (let nestedKey in nestedFlattened) {
                if (!nestedFlattened.hasOwnProperty(nestedKey)) continue;

                flattened[key + '.' + nestedKey] = nestedFlattened[nestedKey];
            }
        } else {
            flattened[key] = object[key];
        }
    }
    return flattened;
};

let newFlattenedData = flattenObject(data);

Original code from: https://gist.github.com/penguinboy/762197

Answer 3

Answer №2

To achieve the desired outcome, follow the instructions below:

1. Declare the following variable in your component:

jsonVal:any=JSON; // for using JSON.stringify and indexOf

Utilize *ngIf to filter values from input using indexOf

    <input type="text" [(ngModel)]="filterString">
    <div *ngFor="let data of result">
      <div *ngIf="jsonVal.stringify(data).indexOf(filterString)!= -1">{{data| json}}</div>
      </div>

For a code example, visit: https://stackblitz.com/edit/angular-ht2afv?file=app/app.component.html

A test object "Campus2" with value "Omaha2" has been included for testing purposes.

Answer 4

To achieve the desired outcome, follow the instructions below:

1. Declare the following variable in your component:

jsonVal:any=JSON; // for using JSON.stringify and indexOf

Utilize *ngIf to filter values from input using indexOf

    <input type="text" [(ngModel)]="filterString">
    <div *ngFor="let data of result">
      <div *ngIf="jsonVal.stringify(data).indexOf(filterString)!= -1">{{data| json}}</div>
      </div>

For a code example, visit: https://stackblitz.com/edit/angular-ht2afv?file=app/app.component.html

A test object "Campus2" with value "Omaha2" has been included for testing purposes.

Answer 5

Answer №3

When searching for a nested property in your data, consider using the map function or similar methods.

It's recommended by the Angular team to perform filtering in your component rather than using pipes in the template for better performance. You can find more information about this here.

An example implementation could be:

const data = [{//your data}]

let filteredData = [];

data.map(val => {
          if (val.Attribute.filter(name => name.AttributeName === "Foo").length > 0) {
            filteredData.push(val)
          }
        });

This code assumes that your data is stored as an array of objects.

If you're concerned about mutating your original data object, you can create a copy like this:

const data = [{//your original data}]
const dataToFilter = JSON.Parse(JSON.stringify(data))

Creating a deep copy of your data prevents accidental changes to the original object. However, this method may not work well with data objects containing functions.

Upon revisiting your question, it seems my previous solution may not directly address your needs. In that case, flattening your data structure as suggested by Zelda7 or creating a custom filtering method might be more suitable.

Answer 6

When searching for a nested property in your data, consider using the map function or similar methods.

It's recommended by the Angular team to perform filtering in your component rather than using pipes in the template for better performance. You can find more information about this here.

An example implementation could be:

const data = [{//your data}]

let filteredData = [];

data.map(val => {
          if (val.Attribute.filter(name => name.AttributeName === "Foo").length > 0) {
            filteredData.push(val)
          }
        });

This code assumes that your data is stored as an array of objects.

If you're concerned about mutating your original data object, you can create a copy like this:

const data = [{//your original data}]
const dataToFilter = JSON.Parse(JSON.stringify(data))

Creating a deep copy of your data prevents accidental changes to the original object. However, this method may not work well with data objects containing functions.

Upon revisiting your question, it seems my previous solution may not directly address your needs. In that case, flattening your data structure as suggested by Zelda7 or creating a custom filtering method might be more suitable.

Exploring Angular's ng-model and filter capabilities with nested data compared to top layer data structures

Answer №1

Answer №2

Answer №3

Similar questions

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques

How can you use ES6 pure Javascript to set the src attribute of an html collection of images from an array of paths as values for each image?

Unable to store user data in the MongoDB Database

Tips for passing multiple values with the same key in Axios as parameters

Sencha Touch - List Creation - How to apply a class to the final item in the list

Tips on generating and receiving shadows in threeJs

put a script in the function.php file

Is it possible to set the state property in React js using the axios response?

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Is there a way to eliminate a tag that includes all attributes except for certain ones?

The drag-and-drop feature for uploading files is not functioning properly

Encountering an error: Reading an undefined property - NodeJS, Express, and Mongoose

Search the table for checked boxes and textboxes that are not empty

Adding routes dynamically in nodeJS using Express is a powerful way to manage your server

Retrieving the Value of a Member in an Object using Angular

Can I prevent users from selecting Today and future dates in Angular with ngx-bootstrap datepicker?

What is the method for submitting a POST request with a JSON body that consists of only a string, without any key-value pairs included?

Encountering a problem with Angular 2 router functionality

Encountering 404 Errors while Attempting to Reach API Endpoint in an Express.js Application Hosted on cPanel

How can I refresh a table's data in Angular Material 2 after making edits without having to reload the entire