Show data from an Object in Javascript

Question

I have an Object with Array of data

{
  "success": true,
  "message": "Merchant and Shop info for auth user",
  "data": {
    "merchant": {
      "status": "Onboarded",
      "merchant_type": "Medium",
      "merchant_email": "",
      "merchant_logo": "",
      "merchant_name": "Test Merchant",
      "merchant_address": "Dhanmondi 32 Road Bridge, Dhanmondi Bridge, Dhaka 1209, Bangladesh",
      "owner": "ishak",
      "merchant_phone_no": "01521200079",
      "merchant_trade_license_no": "ddww23sa",
      "merchant_trade_license_expiration_date": "2004-06-11T00:00:00.000Z",
      "owner_nid_no": 981567831,
      "owner_nid_image_front": "front-image-url",
      "owner_nid_image_back": "back-image-url",
      "owner_phone_no": "01521200079",
      "owner_email": "owner@email.com",
      "merchant_code": "EM38f2f433",
      "createdAt": "2021-05-02T06:03:00.417Z"
    },
    "shops": {
      "count": 3,
      "shops": [
        {
          "status": "Unapproved",
          "max_allowed_total": 1000000,
          "min_allowed_total": 500,
          "max_order_quantity": 0,
          "max_order_amount": 0,
          "min_order_quantity": 0,
          "min_order_amount": 0,
          "is_delivery_hero_allowed": false,
          "is_cod_allowed": false,
          "is_mother_shop": true,
          "approved": false,
          "allowed_payment_methods": [
            "bkash",
            "sslcommerz_gateway",
            "nagad"
          ],
          "shop_type": "Regular",
          "name": "catalog shop test",
          "address": "merchant address",
          "longitude": 1.55,
          "latitude": 1.06,
          "description": "Long description",
          "logo_image": "logo-image-url",
          "image": "banner-image-url",
          "contact_number": "0123456789",
          "merchant_id": "608e4094d33ca200752ca127",
          "slug": "catalog-shop-test-30ac6c82",
          "createdAt": "2021-05-02T06:18:01.950Z"
        },
        {
          "status": "Unapproved",
          "max_allowed_total": 1000000,
          "min_allowed_total": 500,
          "max_order_quantity": 0,
          "max_order_amount": 0,
          "min_order_quantity": 0,
          "min_order_amount": 0,
          "is_delivery_hero_allowed": false,
          "is_cod_allowed": false,
          "is_mother_shop": true,
          "approved": false,
          "allowed_payment_methods": [
            "bkash",
            "sslcommerz_gateway",
            "nagad"
          ],
          "shop_type": "Regular",
          "name": "catalog shop test 2",
          "address": "merchant address",
          "longitude": 1.55,
          "latitude": 1.06,
          "description": "Long description",
          "logo_image": "logo-image-url",
          "image": "banner-image-url",
          "contact_number": "0123456789",
          "merchant_id": "608e4094d33ca200752ca127",
          "slug": "catalog-shop-test-2-4adb1b9",
          "createdAt": "2021-05-02T06:27:05.286Z"
        },
        {
          "status": "Unapproved",
          "max_allowed_total": 1000000,
          "min_allowed_total": 500,
          "max_order_quantity": 0,
          "max_order_amount": 0,
          "min_order_quantity": 0,
          "min_order_amount": 0,
          "is_delivery_hero_allowed": false,
          "is_cod_allowed": false,
          "is_mother_shop": true,
          "approved": false,
          "allowed_payment_methods": [
            "bkash",
            "sslcommerz_gateway",
            "nagad"
          ],
          "shop_type": "Regular",
          "name": "catalog shop test 3",
          "address": "merchant address test update",
          "longitude": 1.55,
          "latitude": 1.06,
          "description": "description",
          "logo_image": "logo-image-url",
          "image": "banner-image-url",
          "contact_number": "0123456789",
          "merchant_id": "608e4094d33ca200752ca127",
          "slug": "catalog-shop-test-3-1e241f30",
          "createdAt": "2021-05-02T06:33:59.990Z"
        }
      ]
    }
  }
}

now I want to list out all the slug from each of the shops array where "is_mother_shop": true, I think I need to do some Array Filter operations in JS but I am not able to come up with a solution for it. I need to create an array with all the slug where "is_mother_shop": true, for all the enlisted shops in this response data. I am not sure what should be a good implementation of it.

Filter the array and get the `slug` property of the filtered items. — VLAZ, May 04 '21 at 15:49

score 1 · Accepted Answer · answered May 04 '21 at 15:51

1

data.data.shops.shops.filter(el => el.is_mother_shop).map(el => el.slug)

Working example: https://codepen.io/bartek-krakowski/pen/XWMraPj?editors=0011

answered May 04 '21 at 15:51

Bart Krakowski

1,655
2
8
25

Anoop Joshi P · Answer 2 · 2021-05-04T15:54:22.107

0

You can use,

slugs = response.data?.shops?.shops
    ?.filter((p) => p.is_mother_shop)
    .map((p) => p.slug);

edited May 04 '21 at 15:54

answered May 04 '21 at 15:49

Anoop Joshi P

25,373
8
32
53

You don't actually need optional chaining with `map`. If `filter` exists `map` would exist too. – Som Shekhar Mukherjee May 04 '21 at 15:53

Show data from an Object in Javascript

2 Answers2