How can I filter nested object in a complex array in React Native-CodePudding

After handle the response data I got an array like below in React-Native

[{
  "children": [],
  "data": {
    "catCd": "C000000146",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Game Design",
    "parentCatCd": "C000000143",
    "parentCatCdPath": "C000000143.C000000146",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000146",
  "key": "C000000146",
  "sortOrder": 3
}, {
  "children": ["C000000144", "C000000145", "C000000146"],
  "data": {
    "catCd": "C000000143",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Design",
    "parentCatCd": null,
    "parentCatCdPath": "C000000143",
    "usedFlag": true
  },
  "hasChildren": true,
  "id": "C000000143",
  "key": "C000000143",
  "sortOrder": 1
}, {
  "children": ["C000000166"],
  "data": {
    "catCd": "C000000144",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "3D & Animation",
    "parentCatCd": "C000000143",
    "parentCatCdPath": "C000000143.C000000144",
    "usedFlag": true
  },
  "hasChildren": true,
  "id": "C000000144",
  "key": "C000000144",
  "sortOrder": 1
}, {
  "children": [],
  "data": {
    "catCd": "C000000166",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Depth1",
    "parentCatCd": "C000000144",
    "parentCatCdPath": "C000000143.C000000144.C000000166",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000166",
  "key": "C000000166",
  "sortOrder": 1
}, {
  "children": [],
  "data": {
    "catCd": "C000000145",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Design Tools",
    "parentCatCd": "C000000143",
    "parentCatCdPath": "C000000143.C000000145",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000145",
  "key": "C000000145",
  "sortOrder": 2
}, {
  "children": [],
  "data": {
    "catCd": "C000000167",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Design 01",
    "parentCatCd": null,
    "parentCatCdPath": "C000000167",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000167",
  "key": "C000000167",
  "sortOrder": 1
}, {
  "children": ["C000000143", "C000000167"],
  "data": null,
  "hasChildren": true,
  "id": "C000000095",
  "key": "C000000095",
  "sortOrder": 0
}]

Finally I want to filter and get all the element that has parentCatCD : null. Because I am new to react and have tried a lots but nothing works. (map, filter, some, etc ...), I always got undefined is not an object error when I try to filter them.

Could you please show me the way to solve this problem, thanks in advanced.

So my code :

  function filterData(arr: any) {
    let newArray = arr.filter(function(item:any){
      return item.data['parentCatCd'] == null;
   }).map(function({data} : {data:any}){
       return {data};
   });
  }

error : null is not an object (evaluating 'item.data['parentCatCd'])

CodePudding user response：

Based on your array structure, Before reading parentCatCd you need to check item.data is null or not, because some items in your array has data property with null value, like this:

let data= [{ "children": [], "data": { "catCd": "C000000146", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Game Design", "parentCatCd": "C000000143", "parentCatCdPath": "C000000143.C000000146", "usedFlag": true }, "hasChildren": false, "id": "C000000146", "key": "C000000146", "sortOrder": 3 }, { "children": ["C000000144", "C000000145", "C000000146"], "data": { "catCd": "C000000143", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Design", "parentCatCd": null, "parentCatCdPath": "C000000143", "usedFlag": true }, "hasChildren": true, "id": "C000000143", "key": "C000000143", "sortOrder": 1 }, { "children": ["C000000166"], "data": { "catCd": "C000000144", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "3D & Animation", "parentCatCd": "C000000143", "parentCatCdPath": "C000000143.C000000144", "usedFlag": true }, "hasChildren": true, "id": "C000000144", "key": "C000000144", "sortOrder": 1 }, { "children": [], "data": { "catCd": "C000000166", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Depth1", "parentCatCd": "C000000144", "parentCatCdPath": "C000000143.C000000144.C000000166", "usedFlag": true }, "hasChildren": false, "id": "C000000166", "key": "C000000166", "sortOrder": 1 }, { "children": [], "data": { "catCd": "C000000145", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Design Tools", "parentCatCd": "C000000143", "parentCatCdPath": "C000000143.C000000145", "usedFlag": true }, "hasChildren": false, "id": "C000000145", "key": "C000000145", "sortOrder": 2 }, { "children": [], "data": { "catCd": "C000000167", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Design 01", "parentCatCd": null, "parentCatCdPath": "C000000167", "usedFlag": true }, "hasChildren": false, "id": "C000000167", "key": "C000000167", "sortOrder": 1 }, { "children": ["C000000143", "C000000167"], "data": null, "hasChildren": true, "id": "C000000095", "key": "C000000095", "sortOrder": 0 }]

let result = data.filter(item => item.data && item.data.parentCatCd == null).map(({data})=> data)
console.log(result)

CodePudding user response：

Ok, so you can try this.

let filteredData = response.filter(e => e.data && e.data.parentCatCd === null);

This will return you that data where the parentCatCd is null.

CodePudding user response：

Assuming that your data is in variable response. The problem with your array is you have your last data field as null. So the normal filter method check will get an error. You can try something like bellow.

let newResponse = response.filter((res) => res.data && res.data.parentCatCd === null).map(({data}) => data);