JS Mapping object picking nested array key-values to make them higher level key-values

Question

HHello. I have a mapping issue. I have nested data and i need to manupulate it to pick some values from nested array and make them higher level key-values. Here is the data i have and the data i want.

Data i have;

[
{
    "id": 1,
    "sku": "24-MB01",
    "name": "Joust Duffle Bag",
    "price": 34,
    "custom_attributes": [
        {
            "attribute_code": "image",
            "value": "/m/b/mb01-blue-0.jpg"
        },
        {
            "attribute_code": "small_image",
            "value": "/m/b/mb01-blue-0.jpg"
        },
        {
            "attribute_code": "thumbnail",
            "value": "/m/b/mb01-blue-0.jpg"
        }
    ]
},
{
    "id": 2,
    "sku": "24-MB04",
    "name": "Strive Shoulder Pack",
    "price": 32,
    "custom_attributes": [
        {
            "attribute_code": "small_image",
            "value": "/m/b/mb04-black-0.jpg"
        },
        {
            "attribute_code": "image",
            "value": "/m/b/mb04-black-0.jpg"
        },
        {
            "attribute_code": "description",
            "value": "<p>Convenience is next to nothing when your day is crammed with action. So whether you're heading to class, gym, or the unbeaten path, make sure you've got your Strive Shoulder Pack stuffed with all your essentials, and extras as well.</p>\n<ul>\n<li>Zippered main compartment.</li>\n<li>Front zippered pocket.</li>\n<li>Side mesh pocket.</li>\n<li>Cell phone pocket on strap.</li>\n<li>Adjustable shoulder strap and top carry handle.</li>\n</ul>"
        },
        {
            "attribute_code": "activity",
            "value": "5438,5448,5450,5445"
        }
    ]
}
]

The Data I want;

[
{
    "id": 1,
    "sku": "24-MB01",
    "name": "Joust Duffle Bag",
    "price": 34,
    "image":"/m/b/mb01-blue-0.jpg"
},
{
    "id": 2,
    "sku": "24-MB04",
    "name": "Strive Shoulder Pack",
    "price": 32,
    "image":"/m/b/mb04-black-0.jpg"        
}
]

What i have so far;

var items = products.items.map(item => {
        const custom_attr = item.custom_attributes.find(attr => !!attr.image) || {};
        delete item.custom_attributes;          
        return {
         ...item,
         ...custom_attr
        };
      });

So basically i dont need the nested array, i just need the image(or maybe another attribute) data. But in the array all keys are the same(code and value as u see). I've tryed some mapping but couldn't get there. So i could use some help. Thanks in advance :)

moonwave99 · Accepted Answer · 2021-05-10 21:37:03Z

1

In order to extract the image custom attribute, you have to find() the entry whose attribute_code is image:

const items = data.map(({ custom_attributes, ...item }) => {
  const image = custom_attributes.find(
    ({ attribute_code }) => attribute_code === 'image'
  )?.value;

  return {
    ...item,
    image,
  };
});

answered May 10, 2021 at 21:37

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

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

1 Comment

Flardryn Over a year ago

Thanks for the answer :)

cbr · Accepted Answer · 2021-05-10 21:31:55Z

Your code was pretty close. Instead of checking for !!attr, I assume what you meant to do was find the custom attribute with attribute: "image":

.find((attr) => attr.attribute_code === "image")

Additionally, instead of using delete (which will mutate the original object), you can use object destructuring and spread (...) to omit the custom_attributes property from the output object:

const products = {
  items: [
    {
      id: 1,
      sku: "24-MB01",
      name: "Joust Duffle Bag",
      price: 34,
      custom_attributes: [
        {
          attribute_code: "image",
          value: "/m/b/mb01-blue-0.jpg",
        },
        {
          attribute_code: "small_image",
          value: "/m/b/mb01-blue-0.jpg",
        },
        {
          attribute_code: "thumbnail",
          value: "/m/b/mb01-blue-0.jpg",
        },
      ],
    },
    {
      id: 2,
      sku: "24-MB04",
      name: "Strive Shoulder Pack",
      price: 32,
      custom_attributes: [
        {
          attribute_code: "small_image",
          value: "/m/b/mb04-black-0.jpg",
        },
        {
          attribute_code: "image",
          value: "/m/b/mb04-black-0.jpg",
        },
        {
          attribute_code: "description",
          value:
            "<p>Convenience is next to nothing when your day is crammed with action. So whether you're heading to class, gym, or the unbeaten path, make sure you've got your Strive Shoulder Pack stuffed with all your essentials, and extras as well.</p>\n<ul>\n<li>Zippered main compartment.</li>\n<li>Front zippered pocket.</li>\n<li>Side mesh pocket.</li>\n<li>Cell phone pocket on strap.</li>\n<li>Adjustable shoulder strap and top carry handle.</li>\n</ul>",
        },
        {
          attribute_code: "activity",
          value: "5438,5448,5450,5445",
        },
      ],
    },
  ],
};

const items = products.items.map(({ custom_attributes, ...item }) => {
  const custom_attr =
    custom_attributes.find((attr) => attr.attribute_code === "image") || {};
  return {
    ...item,
    ...custom_attr,
  };
});

console.log(items);

Thanks for the answer :) i thought i have to delete it like this, now i see

Collectives™ on Stack Overflow

JS Mapping object picking nested array key-values to make them higher level key-values

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related