Filter an array of objects in javascript and use it in reducer

Question

I want to filter an array of objects in javascript and use it in react application's reducer.Here is my data structure.

 [
     {
        "categoryProducts": [],
        "brandCategoryId": 93907,
        "categoryName": "Hi",
        "parentCategoryName": null,
        "productIdList": [
            "e306e4dc-2503-4d85-a7a9-0a9c362a1c95",
            "39423cb8-9514-4840-9bcb-bb27b9628468"
        ],
        "productList": [
            {
                "addon": true,
                "brandProductId": 576227,
                "productName": "Hi1",
                "productType": 0,
                "parentCategoryId": null,
                "isAddon": true,
                "productDescription": "",
                "productId": "e306e4dc-2503-4d85-a7a9-0a9c362a1c95",
                "brandId": "1672",
                "sourceId": "Lt",
                "oldAddonProductId": null,
                "rank": 1,
                "maximumQuantity": 1,
                "minimumQuantity": 0,
                "brandProductSkuList": [
                    {
                        "active": null,
                        "id": 698345,
                        "productSKUName": "",
                        "productSKUDescription": null,
                        "productSKUId": "fdf19138-5fcf",
                        "productSKUPrice": 0,
                        "productSKUStandardUnit": 1,
                        "isActive": null,
                        "skuIdUpdatedTime": null
                    }
                ]
            },
            {
                "addon": true,
                "brandProductId": 576228,
                "productName": "hie",
                "productType": 1,
                "parentCategoryId": null,
                "isAddon": true,
                "productDescription": "",
                "productId": "39423cb8-9514-4840-9bcb-bb27b9628468",
                "brandId": "1672",
                "sourceId": "LT",
                "oldAddonProductId": null,
                "rank": 1,
                "maximumQuantity": 1,
                "minimumQuantity": 0,
                "brandProductSkuList": [
                    {
                        "active": null,
                        "id": 698346,
                        "productSKUName": "",
                        "productSKUDescription": null,
                        "productSKUId": "c71e96e7-f8ed-4d5e-9e17-845a43b239c9",
                        "productSKUPrice": 0,
                        "productSKUStandardUnit": 1,
                        "isActive": null,
                        "skuIdUpdatedTime": null
                    }
                ]
            }
        ],
        "parentCategory": null
    },
    {
        "categoryProducts": [],
        "brandCategoryId": 93797,
        "categoryName": "Test category",
        "parentCategoryName": null,
        "productIdList": [],
        "productList": [],
        "parentCategory": null
    },

I want to filter out those category names whose productSKUid is either null or have a length of 36. So I have tried this code,is it correct? Or should I use filter or map function?

 case AppConstants.getUnmappedMenuItemsSuccess:
  return {
    ...state,
    unmapped: true,
    menu_items: state.menu_items.map((item) => {
      item.productList.map(product => {
        product.brandProductSkuList.map(idCheck => {
          if (idCheck.productSKUId == null || idCheck.productSKUId.length == 36) {
            return idCheck;
          }
        });
        return product;
      })
      return item;
    })
  }

.filter() and .map() do unrelated things. Why are you using .map() when your stated requirement is to filter the array? — nnnnnn
– nnnnnn, Commented Jul 25, 2017 at 3:04
since its a nested array of objects, that's why i need to use map() — shreyaa
– shreyaa, Commented Jul 25, 2017 at 4:51

guest271314 · Accepted Answer · 2017-07-25 07:24:02Z

1

You can use Array.prototype.filter() to return one or more or no elements of an array as an element of a new array if the function passed to .filter() returns true or false

menu_items: state.menu_items.filter(({productList}) => {
              let list = productList.find(({brandProductSkuList}) =>
                           brandProductSkuList);
              return list && list.brandProductSkuList.some(({productSKUId}) =>
                               productSKUId === null || productSKUId.length === 36)
            })

var result = [{
  "categoryProducts": [],
  "brandCategoryId": 93799,
  "categoryName": "Test category 3", //1st object
  "parentCategoryName": null,
  "productIdList": [
    "12bcd765-c2d9-40b9-8a88-ab6386a205a9"
  ],
  "productList": [{
    "addon": false,
    "brandProductId": 576129,
    "productName": "test product",
    "productType": 2,
    "parentCategoryId": null,
    "isAddon": false,
    "productDescription": "test product description",
    "productId": "12bcd765-c2d9-40b9-8a88-ab6386a205a9",
    "brandId": "1672",
    "sourceId": "LT",
    "oldAddonProductId": null,
    "rank": 1,
    "maximumQuantity": 0,
    "minimumQuantity": 0,
    "brandProductSkuList": [{
      "active": null,
      "id": 698174,
      "productSKUName": "",
      "productSKUDescription": null,
      "productSKUId": "trdsfsdf1111",
      "productSKUPrice": 12,
      "productSKUStandardUnit": 1,
      "isActive": null
    }]
  }],
  "parentCategory": null
}, {
  "categoryProducts": [],
  "brandCategoryId": 93797,
  "categoryName": "Test category", //2nd object
  "parentCategoryName": null,
  "productIdList": [],
  "productList": [],
  "parentCategory": null
}, {
  "categoryProducts": [],
  "brandCategoryId": 93775,
  "categoryName": "abhishek", //3rd object
  "parentCategoryName": null,
  "productIdList": [
    "510d0acf-8c20-45f5-8b69-0a1aeac3b2ca"
  ],
  "productList": [{
    "addon": false,
    "brandProductId": 575971,
    "productName": "qA2",
    "productType": 0,
    "parentCategoryId": null,
    "isAddon": false,
    "productDescription": "sa",
    "productId": "510d0acf-8c20-45f5-8b69-0a1aeac3b2ca",
    "brandId": "1672",
    "sourceId": "LT",
    "oldAddonProductId": null,
    "rank": 1,
    "maximumQuantity": 0,
    "minimumQuantity": 0,
    "brandProductSkuList": [{
      "active": null,
      "id": 697967,
      "productSKUName": "",
      "productSKUDescription": null,
      "productSKUId": "b6f38902-2bd9-4595-b1d5-d45db0a30242",
      "productSKUPrice": 0,
      "productSKUStandardUnit": 1,
      "isActive": null
    }]
  }],
  "parentCategory": null
}, ];

const x = result.filter(({productList}) => {
  let list = productList.find(({brandProductSkuList}) =>
           brandProductSkuList
         );
  return list && list.brandProductSkuList.some(({productSKUId}) =>
            productSKUId === null || productSKUId.length === 36)
            
});

document.getElementById('id').innerHTML = JSON.stringify(x, null, 2);

<pre id="id">

</pre>

jsfiddle https://jsfiddle.net/3eLh3Lqe/3/

edited Jul 25, 2017 at 7:24

answered Jul 25, 2017 at 3:06

guest271314

1

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

8 Comments

shreyaa Over a year ago

It gives only brandProductSkuList of the object. How do I get the whole category in the answer? And how do I remove the objects that do not qualify the test from the answer?Here is the jsfiddle link.jsfiddle.net/Sugandh9999/3eLh3Lqe/1

guest271314 Over a year ago

Only one array matches the condition at .filter(). What do you mean by "the whole category"? What is expected result?

shreyaa Over a year ago

"categoryProducts": [], "brandCategoryId": 93775, "categoryName": "abhishek", //3rd object "parentCategoryName": null, "productIdList": [ "510d0acf-8c20-45f5-8b69-0a1aeac3b2ca" ], "productList": [{ "addon": false,........................

shreyaa Over a year ago

This whole category should be the result

shreyaa Over a year ago

but how can I take this list var in reducer

|

Collectives™ on Stack Overflow

Filter an array of objects in javascript and use it in reducer

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related