0

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 :)

Flardryn
  • 457
  • 1
  • 10
  • 25

2 Answers2

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,
  };
});
moonwave99
  • 21,957
  • 3
  • 43
  • 64
0

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);
cbr
  • 12,563
  • 3
  • 38
  • 63