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

Question

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.

Derek Wang · Accepted Answer · 2020-10-23 15:43:38Z

1

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

edited Oct 23, 2020 at 15:43

answered Oct 23, 2020 at 14:06

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

JayC Over a year ago

Thank you Derek, QQ regarding rootData[data]?. does this handle like null/undefined values? ex: will it ignore and skip or will it throw an error

Derek Wang Over a year ago

As you see the last example, for data input test4, it returns undefined because the value is not existed.

JayC Over a year ago

I am getting the following error with the logic you provided. error TS1109: Expression expected. src/app/app.component.ts(308,42): error TS1005: ':' expected.

JayC Over a year ago

test(data: string){ console.log(configData.rootData[data]?.testData0); }

Derek Wang Over a year ago

Oh, I forgot it's using the typescript, I have updated my answer adding the typescript case.

|

Rafael Pizao · Accepted Answer · 2020-10-23 14:52:04Z

0

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

edited Oct 23, 2020 at 14:52

answered Oct 23, 2020 at 14:43

Rafael Pizao

88111 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related