Searching for a string within a JSON object in Angular: step-by-step guide

Question

Searching for a string within a JSON object in Angular: step-by-step guide

JSON Data Example

{
  "rootData": {
    "test1": {
      "testData0": "Previous information",
      "testData1": "Earlier Information"
    },
    "test2": {
      "testData0": "Partial details",
      "testData1": "Service details"
    },
    "test3": {
      "testData0": "Regular content",
      "testData1": {
        "testData0": "Your customized package"
      }
}
}      
}

Component Script

import  *  as  myData  from  './myData.json';

getData(dataValue: string){    
  console.log(myData.rootData.test1.testData0); //outputs "Previous Information.
    
 return myData.rootData.{{data}}.testData0;
}

The getData method is used repeatedly within a loop with different values like 'test1', 'test2', and 'test3' being passed.

An ideal approach would be to dynamically retrieve data based on the provided key.

Currently, the attempt to use {{data}} is not valid in the JSON object.

The objective is to fetch specific data nested inside the JSON file by utilizing the string value passed to the function.

An alternative solution needs to be explored for achieving the intended functionality.

json angular typescript

Answer 1

Answer №1

If you want to retrieve the value associated with a specific key in an Object, you can simply use Object[key] syntax. In this case, key refers to the variable name that holds the key, and using this will give you the corresponding value.

return configData.rootData[data]?.testData0; // Example in Javascript

Instead of utilizing {{ }}, try switching to square brackets for direct access to achieve the desired result.

By examining the code snippet above, rootData[data]?.testData0 is essentially equivalent to

rootData[data] ? rootData[data].testData0 : undefined

. This conditional check is important for validating inputs, especially when dealing with unexpected values for data.

In Typescript:

if (data in configData.rootData && "testData0" in configData.rootData[data]) {
  return configData.rootData[data].testData0;
} else {
  return undefined;
}

const input = {
  "rootData": {
    "test1": {
      "testData0": "Previous data",
      "testData1": "Earlier Data"
    },
    "test2": {
      "testData0": "Partial data",
      "testData1": "Services data"
    },
    "test3": {
      "testData0": "Regular data",
      "testData1": {
        "testData0": "Your package"
      }
    }
  }
};

let data = 'test1';
console.log(input.rootData[data]?.testData0);

data = 'test2';
console.log(input.rootData[data]?.testData0);

data = 'test3';
console.log(input.rootData[data]?.testData0);

data = 'test4';
console.log(input.rootData[data]?.testData0);

data = 'test5';
if (data in input.rootData) {
  console.log('Existed', input.rootData[data].testData0);
} else {
  console.log('Not Existed');
}

Answer 2

If you want to retrieve the value associated with a specific key in an Object, you can simply use Object[key] syntax. In this case, key refers to the variable name that holds the key, and using this will give you the corresponding value.

return configData.rootData[data]?.testData0; // Example in Javascript

Instead of utilizing {{ }}, try switching to square brackets for direct access to achieve the desired result.

By examining the code snippet above, rootData[data]?.testData0 is essentially equivalent to

rootData[data] ? rootData[data].testData0 : undefined

. This conditional check is important for validating inputs, especially when dealing with unexpected values for data.

In Typescript:

if (data in configData.rootData && "testData0" in configData.rootData[data]) {
  return configData.rootData[data].testData0;
} else {
  return undefined;
}

const input = {
  "rootData": {
    "test1": {
      "testData0": "Previous data",
      "testData1": "Earlier Data"
    },
    "test2": {
      "testData0": "Partial data",
      "testData1": "Services data"
    },
    "test3": {
      "testData0": "Regular data",
      "testData1": {
        "testData0": "Your package"
      }
    }
  }
};

let data = 'test1';
console.log(input.rootData[data]?.testData0);

data = 'test2';
console.log(input.rootData[data]?.testData0);

data = 'test3';
console.log(input.rootData[data]?.testData0);

data = 'test4';
console.log(input.rootData[data]?.testData0);

data = 'test5';
if (data in input.rootData) {
  console.log('Existed', input.rootData[data].testData0);
} else {
  console.log('Not Existed');
}

Answer 3

Answer №2

I rely on the ng2-search-filter package for filtering in Angular.

One way to utilize it is through a directive:

<tr *ngFor="let data of configData | filter:searchText">
  <td>{{testData0}}</td>
  <td>{{testData1}}</td>
  ...
</tr>

Alternatively, you can apply the filter programmatically like this:

let configDataFiltered = new Ng2SearchPipe().transform(this.configData, searchText);

For a hands-on demonstration, check out this example:

Answer 4

I rely on the ng2-search-filter package for filtering in Angular.

One way to utilize it is through a directive:

<tr *ngFor="let data of configData | filter:searchText">
  <td>{{testData0}}</td>
  <td>{{testData1}}</td>
  ...
</tr>

Alternatively, you can apply the filter programmatically like this:

let configDataFiltered = new Ng2SearchPipe().transform(this.configData, searchText);

For a hands-on demonstration, check out this example:

Searching for a string within a JSON object in Angular: step-by-step guide

Answer №1

Answer №2

Similar questions

Using AKS Kubernetes to access a Spring Boot application from an Angular frontend using the service name

There was a void in the supertest request with the application/vnd content type

Splitting code efficiently using TypeScript and Webpack

Is it possible to alter the JSON file being loaded in AngularJS by passing a variable?

Error when compiling with Component Lab's Autocomplete function for SVG Icons in Material UI

The error message "Property <property> is not recognized on the type 'jQueryStatic<HTMLElement>'" is indicating an issue with accessing a specific property within the TypeScript codebase that utilizes Angular CLI, NPM,

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

Conceal the absence of a value within an array

What are the steps to integrate npm into a Cordova app within Visual Studio?

"Exploring the power of index signatures and methods in Typescript

Creating an object type that includes boolean values, ensuring that at least one of them is true

Extracting information from a JSON response in Swift

Ionic 3 Local Notification spamming a particular page with excessive pushes

Error thrown: Unhandled Promise Rejection - The name 'ngForm' could not be exported

Understanding the status of file() requests post-executionWould you like the status of file

Java Spark API using basic authentication will issue a 401 error response when accessed from an Angular application

Merging two arrays of objects from the same response in JavaScript

Overriding TypeScript types generated from the GraphQL schema

Struggling with aligning mat-icon in the center using HTML and CSS?