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

In Deno, it is possible to confirm that a variable is an instance of a String

Unable to locate 'reflect-metadata' module within Docker container on Production Server

Moshi was anticipating an object to start but instead encountered an array at the beginning - custom converter was

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

While the AWS CodePipeline is executing the script, an error is appearing in the log. Please address this issue and resolve it

The issue arises in React when input elements fail to render correctly following a change in value, specifically when the keys remain identical

Exploring possibilities within nested JSON objects

Issue with fetching data from the last ID in PHP MySQL database

When transforming the Google Cloud output to JSON with Protobuf, certain fields may be left blank or without a value

Merge attributes from objects within an array

Exploring the extracted data from a JSON file in text format

Observable not triggering Subject.next() as expected

Constant Struct Key in Golang

Locate elements within an array where a specific attribute includes the specified search term

Loading an Angular 2 application or component through an HTTP request can be done by following

There are missing dependencies for the designated entry point, "@vcd/ui-components."

Transforming JSON date format to a different one using Jackson libraries

Collaborate on Typescript Interfaces within a Firebase development environment

When retrieving data from a JSON file, only display the value instead of showing the entire

Locking mat-toolbar and mat-tabs to the top in Angular Material 2