Use a ternary operator to check for key in array exists

Question

I'm currently using a ternary operator to return true if reportDate.parent exists. The problem is that it returns true but for some arrays that return there are no value properties, so the report breaks.

{
        reportData.parent && (
            <React.Fragment>
                <Report/>
            </React.Fragment>
        )
    }

The below breaks:

parent: Array(3)
0: {dateTime: "05/09/2018"}
1: {dateTime: "16/06/2018"}
2: {dateTime: "19/03/2018"}
length: 3

The below works because it has at least 1 value:

parent: Array(3)
0: {dateTime: "05/09/2018", value: 2}
1: {dateTime: "16/06/2018"}
2: {dateTime: "19/03/2018"}
length: 3

I need to do the check at this top level before the report component is returned, something like:

{
    reportData.parent.value === undefined && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

Do I or can I use a ternary operator or another method of conditional rendering here?

To reiterate I want the report to return only if there is at least one value in the array.

Update: I am only looking to see if the key(named value) exists (not simply if a value exists inside the array)

You Nguyen · Accepted Answer · 2018-10-08T12:23:03.177

1

To reiterate I want the report to return only if there is at least one value in the array.

You might try this:

{
    reportData.parent.length > 0 && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

Updated

Based on your comments, I come up with this solution

let parent1 = [
  {
    dateTime: "05/09/2018",
    value: 2
  },
  {
    dateTime: "16/06/2018"
  },
  {
    dateTime: "19/03/2018"
  }
];
let parent2 = [
  {
    dateTime: "05/09/2018"
  },
  {
    dateTime: "16/06/2018"
  },
  {
    dateTime: "19/03/2018"
  }
];

var hasValue = function(element) {
  return element.hasOwnProperty('value')
};

console.log(parent1.some(hasValue)); // true
console.log(parent2.some(hasValue)); // false

And then...

{
    reportData.parent.length > 0 && reportData.parent.some(hasValue) && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

Hopefully, it works as expected

edited Oct 08 '18 at 12:23

answered Oct 08 '18 at 11:54

You Nguyen

9,961
4
26
52

Yes this gives the length of array, all my arrays will have a length, I want to find return truthy if the array has a key called value inside – Tom Rudge Oct 08 '18 at 12:09
Got it! Well then, you have to iterate all over your array and use myObj.hasOwnProperty('key') to check an object's own keys, it will only return true if key is available on myObj directly – You Nguyen Oct 08 '18 at 12:13
That sounds correct, the question is how can I add this to my ternary operator? – Tom Rudge Oct 08 '18 at 12:15
1

@TomRudge I've updated my answer, please give it a try and let me know if it works as expected. – You Nguyen Oct 08 '18 at 12:23

score 0 · Answer 2 · answered Oct 08 '18 at 11:54

0

In the case value is always number you can use some

reportData.parent.some(a => !!a.value)

answered Oct 08 '18 at 11:54

froston

1,027
1
12
24

I thought this solution would be close but it complains .some is not a function – Tom Rudge Oct 08 '18 at 12:11

score 0 · Answer 3 · answered Oct 08 '18 at 11:55

0

You can just check for a truthy value

{
    reportData.parent.value && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

answered Oct 08 '18 at 11:55

Nelson Owalo

2,324
18
37

.value is not a path but a key – Tom Rudge Oct 08 '18 at 12:08
Yes, it will test if `value` really exists, and return true or false accordingly – Nelson Owalo Oct 08 '18 at 12:11
it returns false in both my example arrays because its looking for .value and that does not exist. Please refer to arrays in question – Tom Rudge Oct 08 '18 at 12:13

Use a ternary operator to check for key in array exists

3 Answers3

Updated