How to remove object from an array which have a key value as undefined in React Native?

Question

I have a list which after selecting values returns an array. Now, suppose I select 1st and 3rd values skipping 2nd one then the array returned is as :

 [
  {
   "cname": "10TKN", 
   "code": "403", 
   "id": 1
  },
  {
   "cname": undefined, 
   "code": undefined, 
   "id": 2
  }, 
  {
   "cname": "20TKN", 
   "code": "403", 
   "id": 3
  }
 ]

I want the expected result as :

 [
   {
    "cname": "10TKN", 
    "code": "403", 
    "id": 1
   },
   {
    "cname": "20TKN", 
    "code": "403", 
    "id": 3
   }
 ]

can you be more accurate? , you want to get those with cname and code properties which are not undefined? — zb22
– zb22, Commented May 1, 2020 at 9:16

wentjun · Accepted Answer · 2020-05-01 09:33:43Z

2

You can use JavaScript's Array.filter() to filter away undefined values.

const data = [
  {
   "cname": "10TKN", 
   "code": "403", 
   "id": 1
  },
  {
   "cname": undefined, 
   "code": undefined, 
   "id": 2
  }, 
  {
   "cname": "20TKN", 
   "code": "403", 
   "id": 3
  }
 ];
 
 const res = data.filter(({cname, code, id }) => cname && code && id);
 console.log(res);

This will ensure that only objects with truthy values are returned.

Alternatively, as mentioned by HMR on the comments, if you only want to check for undefined, it will be better to do this:

const res = data.filter(({cname, code, id }) => cname !== undefined && code !== undefined && id !== undefined);

edited May 1, 2020 at 9:33

answered May 1, 2020 at 8:53

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

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

2 Comments

HMR Over a year ago

Could have unpredictable edge case when using falsy, if OP wants to remove when prop is undefined then best check for that: cname !== undefined && code !== undefined

wentjun Over a year ago

@HMR yeah agree. It really depends on the OP's requirements. He might want to keep the nulls or 0s. If that is the case, it will be better to do an undefined check like what you have suggested!

Milind Agrawal · Accepted Answer · 2020-05-01 08:59:16Z

0

You can use filter as suggested already but you will have to check for the selected id(s) from list and then discard the ones not selected. In short you will return true only if the list object id matches with the one you selected

const dataList = [
  {
   "cname": "10TKN", 
   "code": "403", 
   "id": 1
  },
  {
   "cname": undefined, 
   "code": undefined, 
   "id": 2
  }, 
  {
   "cname": "20TKN", 
   "code": "403", 
   "id": 3
  }
 ];

 const selectedDataIds = [1, 3];
 const res = dataList.filter(({ id }) => selectedDataIds.includes(id));
 console.log(res);

answered May 1, 2020 at 8:59

Milind Agrawal

2,9541 gold badge15 silver badges22 bronze badges

Comments

zb22 · Accepted Answer · 2020-05-01 09:07:28Z

0

You can use Destructuring assignment and skip some values with a comma, like this:

const arr = [
  {
   "cname": "10TKN", 
   "code": "403", 
   "id": 1
  },
  {
   "cname": undefined, 
   "code": undefined, 
   "id": 2
  }, 
  {
   "cname": "20TKN", 
   "code": "403", 
   "id": 3
  }
 ]
 
const [first, ,third] = arr;

console.log(first, third);

Destructuring assignment - Ignoring some returned values

answered May 1, 2020 at 9:07

zb22

3,2413 gold badges22 silver badges38 bronze badges

Comments

Abhisar Tripathi · Accepted Answer · 2020-05-01 09:09:24Z

0

Assuming the key that we want to evaluate is cname. We need to filter out the array using Array.filter function -:

let arr = [
  {
   "cname": "10TKN", 
   "code": "403", 
   "id": 1
  },
  {
   "cname": undefined, 
   "code": undefined, 
   "id": 2
  }, 
  {
   "cname": "20TKN", 
   "code": "403", 
   "id": 3
  }
 ];

arr = arr.filter(({cname}) => cname);
console.log(arr)

edited May 1, 2020 at 9:09

answered May 1, 2020 at 8:58

Abhisar Tripathi

1,6612 gold badges13 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to remove object from an array which have a key value as undefined in React Native?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related