Tips on filtering an array in a JSON response based on certain conditions in Angular 7

Question

Tips on filtering an array in a JSON response based on certain conditions in Angular 7

Looking to extract a specific array from a JSON response based on mismatched dataIDs and parentDataIDs using TypeScript in Angular 7.

{ "data":[
    {
       "dataId":"Atlanta",
       "parentDataId":"America"
    },
    {
       "dataId":"Newyork",
       "parentDataId":"America"
    },
    {
       "dataId":"Georgia",
       "parentDataId":"Atlanta"
    },
    {
       "dataId":"South",
       "parentDataId":"Atlanta"
    },
    {
       "dataId":"North",
       "parentDataId":"South"
    }
   ]
}

In the above response, the dataID Newyork does not match any of the parentDataIDs in the entire JSON array. I now aim to filter out only the second array with DataID to create a new array.

This validation will be implemented in TypeScript for Angular 7.

The desired output should look like this - showing DataIDs without corresponding parentDataIDs:

[
  {
    "dataId":"Newyork",
    "parentDataId":"America"
  },
  {
     "dataId":"Georgia",
     "parentDataId":"Atlanta"
   },
   {
      "dataId":"North",
      "parentDataId":"South"
     }
]

Any assistance or feedback is greatly appreciated.

json angular typescript filter angular7

Answer 1

Answer №1

To achieve this, you can utilize the filter method:

let filterValue = 'Atlanta';
const filteredResult = data.data.filter(item=> item.parentDataId != filterValue
    && item.dataId != filterValue);

For demonstration purposes, here is an example:

let data = { "data":[
    {
        "dataId":"Atlanta",
        "parentDataId":"America"
    },
    {
        "dataId":"Newyork",
        "parentDataId":"America"
    },
    {
        "dataId":"Georgia",
        "parentDataId":"Atlanta"
    }
   ]
};

let filterValue = 'Atlanta';
const filteredResult = data.data.filter(item=> item.parentDataId != filterValue
    && item.dataId != filterValue);
console.log(filteredResult);

Answer 2

To achieve this, you can utilize the filter method:

let filterValue = 'Atlanta';
const filteredResult = data.data.filter(item=> item.parentDataId != filterValue
    && item.dataId != filterValue);

For demonstration purposes, here is an example:

let data = { "data":[
    {
        "dataId":"Atlanta",
        "parentDataId":"America"
    },
    {
        "dataId":"Newyork",
        "parentDataId":"America"
    },
    {
        "dataId":"Georgia",
        "parentDataId":"Atlanta"
    }
   ]
};

let filterValue = 'Atlanta';
const filteredResult = data.data.filter(item=> item.parentDataId != filterValue
    && item.dataId != filterValue);
console.log(filteredResult);

Answer 3

Answer №2

Take a look at this StackBlitz Link

Here is my approach in the code snippet below:

reducedData = [...this.data];

this.data.reduce((c,n,i) => {
   this.data.reduce((d,o, inex) =>  { 
      if ( n.dataId === o.parentDataId){ 
           this.reducedData.splice(i,1, {'dataId': 'removed', parentDataId: 'true'}); 
      } else {
         return o;
      }
    },{});
   return n;
}, {});   

this.reducedData = this.reducedData.filter (value => value.dataId !== 'removed');

The HTML file section:

<h4> If dataId does not have parentId </h4>
<hr>
<pre>
  {{reducedData | json}}
</pre>

MODIFY

If you do not want to utilize an additional object like reducedData, here is another solution that can be used effectively. Check out this StackBlitz Link

Within the component.ts file:

this.data.reduce((c,n,i) => {
    this.data.reduce((d,o, inex) =>  { 
      if ( n.dataId === o.parentDataId) {
      this.data[i]['removed'] = "removed";
      } else{
        return o;
      }
    },{});
   return n;
}, {});

this.data = this.data.filter (value => value['removed'] !== 'removed');

In the component.html file:

<h4> If dataId does not have parentId </h4>
<hr>
<pre>
 {{data |json}}
</pre>

Answer 4

Take a look at this StackBlitz Link

Here is my approach in the code snippet below:

reducedData = [...this.data];

this.data.reduce((c,n,i) => {
   this.data.reduce((d,o, inex) =>  { 
      if ( n.dataId === o.parentDataId){ 
           this.reducedData.splice(i,1, {'dataId': 'removed', parentDataId: 'true'}); 
      } else {
         return o;
      }
    },{});
   return n;
}, {});   

this.reducedData = this.reducedData.filter (value => value.dataId !== 'removed');

The HTML file section:

<h4> If dataId does not have parentId </h4>
<hr>
<pre>
  {{reducedData | json}}
</pre>

MODIFY

If you do not want to utilize an additional object like reducedData, here is another solution that can be used effectively. Check out this StackBlitz Link

Within the component.ts file:

this.data.reduce((c,n,i) => {
    this.data.reduce((d,o, inex) =>  { 
      if ( n.dataId === o.parentDataId) {
      this.data[i]['removed'] = "removed";
      } else{
        return o;
      }
    },{});
   return n;
}, {});

this.data = this.data.filter (value => value['removed'] !== 'removed');

In the component.html file:

<h4> If dataId does not have parentId </h4>
<hr>
<pre>
 {{data |json}}
</pre>

Answer 5

Answer №3

Here's an example for you to follow.

const info = { "info":[
    {
       "id":"Los Angeles",
       "parentID":"California"
    },
    {
       "id":"San Francisco",
       "parentID":"California"
    },
    {
       "id":"Silicon Valley",
       "parentID":"San Jose"
    }
   ]
};

const searchKey = "San Francisco"
const matchFound = info.info.some( item => item.parentID ===  searchKey && item.id === searchKey)
let relevantItems ;
if(!matchFound){
    relevantItems = info.info.find(item => item.id === searchKey )
}

Answer 6

Here's an example for you to follow.

const info = { "info":[
    {
       "id":"Los Angeles",
       "parentID":"California"
    },
    {
       "id":"San Francisco",
       "parentID":"California"
    },
    {
       "id":"Silicon Valley",
       "parentID":"San Jose"
    }
   ]
};

const searchKey = "San Francisco"
const matchFound = info.info.some( item => item.parentID ===  searchKey && item.id === searchKey)
let relevantItems ;
if(!matchFound){
    relevantItems = info.info.find(item => item.id === searchKey )
}

Tips on filtering an array in a JSON response based on certain conditions in Angular 7

Answer №1

Answer №2

MODIFY

Answer №3

Similar questions

Error encountered in amCharts Serial Chart when data parsing is enabled with the setting "parseDates": true which resulted in the failure to display data

The angular httpTestingController.expectOne method throws an error, even when the httpClient's get method has

Troubleshooting Date Errors in Typescript with VueJS

Exploring the functionality of anchor tags in Angular: what makes them tick?

aligning JSON information with JavaScript object

Ionic 2 - Dynamically Loading Segments

Using Generic Types in TypeScript Files for React Components

The @JsonIgnore annotation in Jax-RS does not seem to be functioning properly after including the service endpoint in the Application

The functionality of Laravel's IlluminateHttpJsonResponse::json method is not available in every situation, as it is only applicable in certain

Utilizing the get and set methods to alter the structure of a string, but encountering the issue where the set method is

method for retrieving a single key-value pair from a JSON object

Ways to resolve a 404 error on a live Angular application being hosted by NGINX

Is there a way to dynamically change an icon based on certain conditions using typescript?

How can we integrate information from a local JSON file onto our website?

Script execution in '<URL>' has been prevented due to sandboxing of the document's frame and the absence of the 'allow-scripts' permission setting

Ignoring the validation pattern for a string within an array in Json Schema

Trouble accessing contacts on LinkedIn

The Angular Router is continuing to show the HomeComponent upon navigation, rather than just displaying the ChildComponent

Having trouble with the .d.ts module for images?

Revitalize access token with Keycloak in Javascript