Can Angular be used to dynamically filter a JSON object to display only the fields that match a specified filter text?

Question

Can Angular be used to dynamically filter a JSON object to display only the fields that match a specified filter text?

Sorry if this question has already been asked; I couldn't find the solution.

Here is my issue:

In my Angular app, I am retrieving a complex JSON object from a web service. I then present this JSON object to the user in tree format using ngx json viewer.

Considering that the tree is extensive and intricate, I would like to allow users to filter which fields they see in the view.

I've been struggling to determine how to filter the fields from the JSON based on the filter text entered in the input box. While I know it's possible to query and filter for specific field values, I haven't come across a way to filter based on the field names themselves.

For example, if I have this JSON:

{
    "firstname": "John",
    "lastname": "Smith",
    "phone": "999-999-9999",
    "address": "123 Main St"
}

And the user types in "name" as the filter text, I want to display only the matching fields:

{
    "firstname": "John",
    "lastname": "Smith"
}

Does this concept make sense? Is it feasible?

Thanks for your help!

json angular typescript

Answer 1

Answer №1

Object.keys(o).filter(o=>o.includes("name"))

This code snippet will return the keys in the object 'o' that contain the string "name", but it will not include the corresponding values for those keys.

var o = {
    "firstname": "John",
    "lastname": "Smith",
    "phone": "999-999-9999",
    "address": "123 Main St"};

var matchingKeys = Object.keys(o).filter(o=>o.includes("name"));
var filteredObject = {};

matchingKeys.forEach(key => filteredObject[key] = o[key]);

After running this script, the 'filteredObject' will only contain the keys and values where the key contains the string "name" like so:

{
    "firstname": "John",
    "lastname": "Smith"
}

If you want to use this as a TypeScript function, you can define it like below:


public filterObjectContainsKey(a_sFilterKey: string, a_oObject: Object): Object {

    var matchingKeys = Object.keys(a_oObject).filter(o=>o.includes(a_sFilterKey));
    var filteredObject = {};

    matchingKeys.forEach(key => filteredObject[key] = a_oObject[key]);
    return filteredObject;
}

Answer 2

Object.keys(o).filter(o=>o.includes("name"))

This code snippet will return the keys in the object 'o' that contain the string "name", but it will not include the corresponding values for those keys.

var o = {
    "firstname": "John",
    "lastname": "Smith",
    "phone": "999-999-9999",
    "address": "123 Main St"};

var matchingKeys = Object.keys(o).filter(o=>o.includes("name"));
var filteredObject = {};

matchingKeys.forEach(key => filteredObject[key] = o[key]);

After running this script, the 'filteredObject' will only contain the keys and values where the key contains the string "name" like so:

{
    "firstname": "John",
    "lastname": "Smith"
}

If you want to use this as a TypeScript function, you can define it like below:


public filterObjectContainsKey(a_sFilterKey: string, a_oObject: Object): Object {

    var matchingKeys = Object.keys(a_oObject).filter(o=>o.includes(a_sFilterKey));
    var filteredObject = {};

    matchingKeys.forEach(key => filteredObject[key] = a_oObject[key]);
    return filteredObject;
}

Can Angular be used to dynamically filter a JSON object to display only the fields that match a specified filter text?

Answer №1

Similar questions

Troubleshooting JavaScript Date Problem with Internet Explorer 7

Tips for utilizing programmatic object keys as TypeScript type?

Converting JSON to parquet format or not converting at all, the choice

Utilize global variables in ng-apimock mocks without the need for double quotes

Transforming the primary image to the thumbnail image when hovering over it with JSON objects

AngularJS: Utilizing Multiple HTTP Requests with the $http Service

Is there a workaround in TypeScript to add extra details to a route?

What is the process for bringing data from a REST API into a SQL Server database?

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Using TypeScript to automatically deduce the output type of a function by analyzing the recursive input type

Utilizing ConfigurationBuilder to incorporate null values into a list using a json file

What is the best way to handle rejecting an invalid JSON body when working with Express or Body-Parser?

Utilizing TypeScript's Type Inference to Simplify Function Combinations

Is it recommended to utilize JSON in conjunction with jQuery and AJAX within a PHP file?

Tips for verifying error messages in angular for nested form group fields

`Next.js: Addressing synchronization issues between useMemo and useState`

The JSON object is not providing the length of the array, returning the value as

Using LINQ with ngFor in Angular 6

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

What are the distinctions between using getStaticPaths + getStaticProps and useRouter in NextJS?