CODEWITHSUNDEEP
jsonangulartypescript
JayC
JayC

Reputation: 2292

How to search in json object in angular using a string?

Json

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

Component.ts

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

getData(data: string){    
  console.log(configData.rootData.test1.testData0); //returns "Previous Data.
    
 return configData.rootData.{{data}}.testData0;
}

This getData method is being called in a loop passing a string with values of "test1" the first time "test2" the second time and "test3" the third time called.

I want to do something like this

return configData.rootData.{{data}}.testData0; //should return Previous data, then "partial data" if called again because test2 will be passed in data string.

I know this is not possible the way I am doing it because {{data}} is not defined in my json object.

The goal is to check for the object inside the object. The string data is returning values existing in the json object. I want to use that data to dynamically search in the json file and pull the values.

I know my attempt is not valid. I would like to know if there is an alternative to make this work as I intended.

Upvotes: 0

Views: 1318

Answers (2)

Derek Wang
Derek Wang

Reputation: 10193

To get the value with the key in Object, you can use Object[key] (here, key is variable name) and this will return the value of the selected key.

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

So instead of using {{ }}, replace it with square brackets and you will get the result.

And on the above code, rootData[data]?.testData0 has same meaning as rootData[data] ? rootData[data].testData0 : undefined so this will be needed for validation check. (unexpected data value input)

On 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');
}

Upvotes: 1

Rafael Pizao
Rafael Pizao

Reputation: 841

I use ng2-search-filter.

By directive

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

Or programmatically

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

Practical example: https://angular-search-filter.stackblitz.io

Upvotes: 0

Related Questions