Exclude items from Array.map()

Question

I am trying to exclude items that contain Packages in packageData.type. To show only the packageData that has items with packageData.type as Add-on.

Array is as example

{
  "packageData": [
    {
      "title": "Title 1",
      "type": [
        "Packages"
      ]
    },
    {
      "title": "Title 2",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 3",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 4",
      "type": [
        "Add-on"
      ]
    }
  ]
}

and this is how I am currently trying to remove results which is giving zero results.

<ul>
  {packageData.map(function() {
    if (packageData.type ==! "Packages") {
     return (
      <li key={packageData.id}>
        <a>
          <img src={packageData.heroImage.sizes.src} alt=""/>
          <h3>{packageData.title}</h3>
        </a>
      </li> );
    } else {
      return null;
    };
  })}
</ul>

How can I make this work? Or should I be filtering these results prior to displaying and then map the returned items?

Your type property contains an array. Comparing a string to an array will never yield true. — Robby Cornelissen
– Robby Cornelissen, Commented Jun 20, 2018 at 7:57
Thank you all - there I was over complicating things. My array is slightly more complex than the example shown but you've put me on the right path. — Darren
– Darren, Commented Jun 20, 2018 at 7:59

nerding_it · Accepted Answer · 2018-06-20 08:00:45Z

4

You have to use filter before map, Filter will filter the array and then map will iterate through array. Below is the sample code

var data = {
  "packageData": [
    {
      "title": "Title 1",
      "type": [
        "Packages"
      ]
    },
    {
      "title": "Title 2",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 3",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 4",
      "type": [
        "Add-on"
      ]
    }
  ]
};

data.packageData.filter((item) => { return item.type[0] !== 'Packages' }).map((item)=> { console.log(item); });

answered Jun 20, 2018 at 8:00

nerding_it

7027 silver badges17 bronze badges

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

1 Comment

James Monger Over a year ago

OP says he specifically wants only the Add-On types to be shown rather than "not Packages". If another type is added, this code will break - you should instead check that item.type.indexOf("Add-On") !== -1

Collectives™ on Stack Overflow

Exclude items from Array.map()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related