What is wrong with my ternary operator syntax

Question

My Products page consist of Product Items from a fetch API call from a local URL (I have included the array returned from the API call here which is stored in products variable). It has 6 Items with 3 being shoes and 3 being headphones, Shoes item has a nested property object called skus while headphones don't have it.

I want my product page to show all 6 items but when I select the size selector dropdown in my page, I want to filter only shoes with that specific size (size is a object property of skus).

Error says it is with the ternary operator, can someone clarify me, what's wrong in ternary syntax.
Thanks.

Array returned from API call

{
      "id": 1,
      "category": "shoes",
      "image": "shoe1.jpg",
      "name": "Hiker",
      "price": 94.95,
      "skus": [
        { "sku": "17", "size": 7 },
        { "sku": "18", "size": 8 }
      ],
      "description": "This rugged boot will get you up the mountain safely."
    },
    {
      "id": 2,
      "category": "shoes",
      "image": "shoe2.jpg",
      "name": "Climber",
      "price": 78.99,
      "skus": [
        { "sku": "28", "size": 8 },
        { "sku": "29", "size": 9 }
      ],
      "description": "Sure-footed traction in slippery conditions."
    },
    {
      "id": 3,
      "category": "shoes",
      "image": "shoe3.jpg",
      "name": "Explorer",
      "price": 145.95,
      "skus": [
        { "sku": "37", "size": 7 },
        { "sku": "38", "size": 8 },
        { "sku": "39", "size": 9 }
      ],
      "description": "Look stylish while stomping in the mud."
    },
    {
      "id": 4,
      "category": "headphone",
      "image": "headphone3.jpg",
      "name": "headphone red",
      "price": 100,
      "description": "Red colored headphone"
    },
    {
      "id": 5,
      "category": "headphone",
      "image": "headphone2.jpg",
      "name": "headphone blue",
      "price": 90,
      "description": "Blue colored headphone"
    },
    {
      "id": 6,
      "category": "headphone",
      "image": "headphone1.jpg",
      "name": "headphone black",
      "price": 80,
      "description": "Black colored headphone"
    }

Product filtering code when I select size in dropdown

const filteredProducts = size
    ? products.filter((element) => {
        element.skus
          ? products.filter((element) => {
              element.skus.find(
                (element_skus) => element_skus.size === parseInt(size)
              );
            })
          : products;
      })
    : products;

Error referes to lines

element.skus

in the product filtering code

Error image error

[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) -> _"**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. Please reserve the use of images for diagrams or demonstrating rendering bugs, things that are impossible to describe accurately via text."_ — Andreas, Mar 29 '21 at 12:45
The real issue is. Why are you using the ternary operator to confuse yourself. — John, Mar 29 '21 at 12:45
What is that `parent()` function you're attempting to call? The second error is referring to it being `window.parent`, which is definitely not what you want. — AKX, Mar 29 '21 at 12:45
You are not returning anything from your arrow functions. Even if you return, `filter` will never return a `falsy` value — adiga, Mar 29 '21 at 12:46
At least partially a duplicate of [*Why doesn't my arrow function return a value?*](https://stackoverflow.com/questions/45754957/why-doesnt-my-arrow-function-return-a-value). — T.J. Crowder, Mar 29 '21 at 12:47
@AKX it is corrected it is typo mistake it should be parseInt() — Nawaz Mohamed, Mar 29 '21 at 12:52

AKX · Answer 1 · 2021-03-29T13:03:00.153

2

I think what you're after is

function filterProducts(products, size) {
  // Nothing to filter - early-out.
  if (!size) return products;

  // Get the products which...
  return products.filter((product) => {
    // ... have any SKU that matches the desired size.
    return product.skus?.some((sku) => sku.size === size);
  });
}

Don't try to be fancy with a triple-nested ternary operator.

edited Mar 29 '21 at 13:03

answered Mar 29 '21 at 12:48

AKX

152,115
15
115
172

score 0 · Answer 2 · answered Mar 29 '21 at 12:54

0

No, the error says that you began an arrow function but you didn't continue with a codeblock {do_something;}. You continued instead with an expression like inside an if statement if (expression)...

answered Mar 29 '21 at 12:54

biberman

5,606
4
11
35

@AKX now the error says `Cannot read property 'some' of undefined` when selected a size from dropdown – Nawaz Mohamed Mar 29 '21 at 13:46

Mahdi Ghajary · Answer 3 · 2021-03-29T13:06:53.127

0

I guess you better not to use ternary operator when trying to implement relatively complex logic. I recommend something like below:

const checkShoesAvailability = (products) => {
    return products.some((item) => item.skus !== undefined)
}

const filterProducts = (products, size) => {
    if (!checkShoesAvailability(products)) return products

    return products.filter((element) => element.skus?.some((sku) => sku.size === parseInt(size)))
}

edited Mar 29 '21 at 13:06

answered Mar 29 '21 at 12:58

Mahdi Ghajary

2,717
15
20

`item.skus !== false` will **always** be `true` and `products.filter((element) ...)` is not stored/returned/processed anywhere. The filtered array is just generated and immediately thrown away. – Thomas Mar 29 '21 at 13:03
@Thomas Thanks! fixed it. – Mahdi Ghajary Mar 29 '21 at 13:07

What is wrong with my ternary operator syntax

3 Answers3