Select a property from an array of objects based on a value : Javascript

Question

I have an array of objects with the following structure:

var arr = [
  {
    "value": "abc",
    "checked": true
  },
  {
    "value": "xyz",
    "checked": false
  },
  {
    "value": "lmn",
    "checked": true
  }
];

let result = arr.filter(item => item.checked);

console.log(result);

I would want the output to be:

["abc", "lmn"]

Because those two values have checked: true.

I have tried filtering out based on checked value:

let result = arr.filter(item => item.checked);

I am getting the objects that has checked property value that is set to true.

Help would be appreciated.

Your input's syntax is invalid. Consider providing a valid data structure. Arrays do not have key-value pairs, only values — CertainPerformance
– CertainPerformance, Commented Jul 25, 2019 at 9:14
Possible duplicate of use filter to return property values in an object — Matsemann
– Matsemann, Commented Jul 29, 2019 at 8:16

Ghoul Ahmed · Accepted Answer · 2019-07-25 09:20:26Z

47

use filter and map:

const arr =[{"value":"abc","checked":true},{"value":"xyz","checked":false},{"value":"lmn","checked":true}];

 const result = arr.filter(res=>res.checked).map(ele=>ele.value);
 
 console.log(result);

answered Jul 25, 2019 at 9:20

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

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

1 Comment

SK. Over a year ago

if you want unique values: const result = Array.from(new Set(arr.filter(res=>res.checked).map(ele=>ele.value)));

Kobe · Accepted Answer · 2020-06-09 08:01:24Z

33

You can use reduce and check if the checked property is true, then push (As pointed out by assoron) the value to the accumulator - there is no need for 2 loops:

const arr = [
  { "value": "abc", "checked": true },
  { "value": "xyz", "checked": false },
  { "value": "lmn", "checked": true }
]

const filtered = arr.reduce((a, o) => (o.checked && a.push(o.value), a), [])      
console.log(filtered)

edited Jun 9, 2020 at 8:01

answered Jul 25, 2019 at 9:19

Kobe

6,4681 gold badge18 silver badges38 bronze badges

9 Comments

Kobe Over a year ago

@assoron Yes, you are right. I only wrote concat so you could write it on one line so as to be more readable. And spread syntax is horribly slower, I remember writing a JSPerf once and iirc it was 50% slower.

Kobe Over a year ago

@assoron check this perf jsperf.com/push-vs-concat-with-reduce/1 - 94% slower lol

claasic Over a year ago

My ancient browser setup puts concat as 40% slower.

Jack Bashford Over a year ago

You can do it in one line with push: (a.push(o.value), a).

Jack Bashford Over a year ago

Yep - the comma operator evaluates all code passed, then uses the last one. So a.push(o.value) is run, then a is used as the return value of the expression, and returned from the function. Make sense?

|

Jack Bashford · Accepted Answer · 2019-07-25 09:17:06Z

9

Firstly, that's not valid JS - you need to swap your brackets and braces. Arrays use [], and objects use {}, not the other way around.

Secondly, you should first filter out the wanted objects based on the checked property, then use map to extract the properties you want:

const arr =[{"value":"abc","checked":true},{"value":"xyz","checked":false},{"value":"lmn","checked":true}];

const res = arr.filter(({ checked }) => checked).map(({ value }) => value);

console.log(res);

answered Jul 25, 2019 at 9:17

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

MH2K9 · Accepted Answer · 2019-07-25 10:01:57Z

4

Array.prototype.reduce() might help you. reduce() callback takes two arguments, who's first argument is the old/previous iteration value and second argument is the current iteration value/element.

So using this function we can holds our current iteration values to the previous iteration value (total values).

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

var arr = [{"value": "abc","checked": true},{"value": "xyz","checked": false},{"value": "lmn","checked": true}]

const result = arr.reduce((acc, cur) => ((cur.checked && acc.push(cur.value)), acc), [])
console.log(result)

edited Jul 25, 2019 at 10:01

answered Jul 25, 2019 at 9:24

MH2K9

12.1k7 gold badges34 silver badges49 bronze badges

1 Comment

MH2K9 Over a year ago

only returns the last one of (...)

Nick Parsons · Accepted Answer · 2019-07-26 10:56:31Z

4

You can use .reduce to essentially map and filter at the same time. Below I have built an accumulated array using [v].slice(+!c) which will add the value to the (accumulated) array if c is true, else, it will not add it to the array (as [v].slice(+!false) will return [], and [...[]] will give []):

const arr = [{
 "value": "abc",
 "checked": true
}, {
 "value": "xyz",
 "checked": false
}, {
 "value": "lmn",
 "checked": true
}];

const res = arr.reduce((a, {value:v, checked:c}) => [...a, ...[v].slice(+!c)], []);
console.log(res);

edited Jul 26, 2019 at 10:56

answered Jul 25, 2019 at 9:44

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Comments

ellipsis · Accepted Answer · 2019-07-25 09:18:17Z

3

Fix the data structure and use filter and map

var obj = [  
            {
                "value" : "abc",
                "checked" : true
            },
            {
                "value" : "xyz",
                "checked" : false
            },
            {
                "value" : "lmn",
                "checked" : true
            }
           ]
console.log(obj.filter(function(e){return e.checked==true}).map(function(e){return e.value}))

answered Jul 25, 2019 at 9:18

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Comments

Hardik Shah · Accepted Answer · 2019-07-25 09:20:48Z

3

Using map and filter function as below:

var arr = [ {
  "value": "abc",
  "checked": true
},
{
  "value": "xyz",
  "checked": false
},
{
  "value": "lmn",
  "checked": true
}]


let checkedValues = arr.map((item) => item.checked ? item.value : null).filter(item => item);

console.log(checkedValues);

answered Jul 25, 2019 at 9:20

Hardik Shah

4,2082 gold badges22 silver badges45 bronze badges

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2019-07-25 09:23:15Z

3

Do not make the things complex. Just use a plain for loop and save the runtime. The following will iterate the array only once even if you have all the elements in your array has a checked property true.

var arr = [{
 "value": "abc",
 "checked": true
}, {
 "value": "xyz",
 "checked": false
}, {
 "value": "lmn",
 "checked": true
}];

var results = [];
for(var i=0; i<arr.length-1; i++) {
  if(arr[i].checked === true){
    results.push(arr[i].value)
  }
}

If you look into this internal implementation of .map/.filter they will iterate the array using a while loop. Let's say if you have a data that has all the elements set with checked true, then filter will iterate over all the elements once and again map will iterate over them to fetch the value from it.

answered Jul 25, 2019 at 9:23

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

2 Comments

Kobe Over a year ago

Thats why I used reduce :) Nonetheless, a for loop is more efficient here.

Rajaprabhu Aravindasamy Over a year ago

@Kobe Agree...!

Luca T · Accepted Answer · 2019-07-25 09:29:00Z

3

All solutions here are valid, but if you prefer a more iterative approach with ES6+ syntax you can explicitly each-loop over your items in order to make your intentions super-clear for your readers (plus, it's faster than concatenating filter and map, as that loops over your list two times):

const items = [
  {
    "value": "abc",
    "checked": true
  },
  {
    "value": "xyz",
    "checked": false
  },
  {
    "value": "lmn",
    "checked": true
  }
];

const formattedListOfFilteredItems = [];
for (item of items) {
  if (item.checked)
    formattedListOfFilteredItems.push(item.value);
}

console.log(formattedListOfFilteredItems);

answered Jul 25, 2019 at 9:29

Luca T

6885 silver badges8 bronze badges

Comments

Saurabh Yadav · Accepted Answer · 2019-07-25 09:44:08Z

create a generic function in which you just need to pass the key value and array and it will filter out the arry on the basic of parameters

 var arr = [
          {
            "value": "abc",
            "checked": true
          },
          {
            "value": "xyz",
            "checked": false
          },
          {
            "value": "lmn",
            "checked": true
          }
        ]


            function filterList(keyValue, list) {
                let filteredList = [];
                for(let i = 0; i < list.length; i++) {
                    if(list[i]["checked"] === keyValue) {
                        filteredList.push(list[i]["value"]);
                    }
                }
                return filteredList;
            }

    console.log(filterList(true, arr));

Tuhin Das · Accepted Answer · 2019-07-31 08:39:38Z

3

var a = [];
arr.forEach( (i)=> i.checked ? a.push(i.value) :null  )

It will evaluate the method passed in foreach for each element of the array and check if the element.checked is true it will push the element.value in the array a which is the desired output.

edited Jul 31, 2019 at 8:39

answered Jul 31, 2019 at 6:43

Tuhin Das

4992 silver badges11 bronze badges

Comments

Fahad Ahmed · Accepted Answer · 2019-07-25 09:48:52Z

1

You are not pushing the value in the new array. Try this it is working properly.

const arr = [{ "value": "abc", "checked": true }, { "value": "xyz", "checked": false }, { "value": "lmn", "checked": true }]
let result = []
let check = arr.filter((val) => {
    if (val.checked) {
        result.push(val.value)
    }
})
console.log(result);

answered Jul 25, 2019 at 9:48

Fahad Ahmed

443 bronze badges

Collectives™ on Stack Overflow

Select a property from an array of objects based on a value : Javascript

12 Answers 12

1 Comment

9 Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

9 Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related