CODEWITHSUNDEEP
javascriptarraysreactjsobject
Praveen George
Praveen George

Reputation: 9715

How to get the length of a key conditionally in an object array using React JS

I have an array of objects with size > 0. Now based on the isTraining Key value length from all objects, I have to control the DOM elements.

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
    0:
    id: "xxx"
    accreditation: "xxxx xxx xxx"
    institution: "xxxx xxx xxx xxxx xxx xxx"
    location: "xxxx xxx xxx"
    dateStart: "1982-06-01 00:00:00"
    dateEnd: "1984-06-01 00:00:00"
    description: "xxxx xxx xxx"
    award: "xxxx xxx xxx"
    isTraining: "0"

For example, If I have 10 objects and among these 6 objects has the isTraining value 0 and remaining 4 objects has the isTraining value 1. Now How can I filter or map through the objects to find out the length of key isTraining with values 0 and 1?

In my case the expected result is something like:

The number of Education is: 6 The number of Training is: 4

What is the most effective method to iterate and find out the length of a Key based on its value?

enter image description here

Upvotes: 0

Views: 686

Answers (5)

Anand Jose
Anand Jose

Reputation: 658

You can use array.filter()

let array = [{
  id: 1,
  isTraining: 0
}, {
  id: 2,
  isTraining: 0
}, {
  id: 3,
  isTraining: 1
}, {
  id: 4,
  isTraining: 0
}, {
  id: 5,
  isTraining: 1
}];

let length = array.filter(item => item.isTraining === 0).length

Upvotes: 1

hackape
hackape

Reputation: 19957

Most concise way, use Array.prototype.reduce

const [educationCount, trainingCount] = arr.reduce(([a, b], item) => [
  a + item.isTraining == '0' ? 1 : 0,
  b + item.isTraining == '1' ? 1 : 0,
], [0, 0])

Upvotes: 1

gdh
gdh

Reputation: 13682

You can use a forEach loop and keep incrementing the variable counts.

Like this

let myArray = [{
  dateEnd: "1984-06-01 00:00:00",
  description: "xxxx xxx xxx",
  isTraining: "0"
}];

let isTrainingTrue = 0;
let isTrainingFalse = 0;
myArray.forEach(item => {
    if(item.isTraining === "0"){
        isTrainingFalse += 1;
    }else{
        isTrainingTrue += 1;
    }
});

console.log('isTrainingTrue', isTrainingTrue);
console.log('isTrainingFalse', isTrainingFalse);

EDIT

you can simplify using reduce funciton:

let [isTrainingTrue, isTrainingFalse] = myArray.reduce((a,v,i) => {
    v.isTraining === "1" ? a[0] += 1 : a[1] += 1;
    return a;
},[0,0]);

console.log('isTrainingTrue', isTrainingTrue, isTrainingFalse);

Upvotes: 1

Nuwan.Niroshana
Nuwan.Niroshana

Reputation: 407

You can use the 'filter' method to filter objects based on the given condition as follow

const results = items.filter(item => {
    return item.isTraining === "0";
});

console.log(result.length);

and you can map the results like this

{
    items.filter(item => {
        return item.isTraining === "0";
    }).map(item => { return (<li key={item.id}>{ item.id }</li>);
}

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 202751

Array reduce into an object using the isTraining string value as the result keys.

const data = [
  { isTraining: "0" },
  { isTraining: "1" },
  { isTraining: "1" },
  { isTraining: "0" },
  { isTraining: "1" },
  { isTraining: "0" },
  { isTraining: "1" },
  { isTraining: "0" },
  { isTraining: "1" },
  { isTraining: "1" },
];

const res = data.reduce((acc, { isTraining }) => {
  acc[isTraining]++;
  return acc;
}, {"0": 0, "1": 0});

console.log(res)

Upvotes: 1

Related Questions