JS 映射 object 选择嵌套数组键值以使它们成为更高级别的键值

Question

你好。 我有一个映射问题。 我有嵌套数据，我需要对其进行操作以从嵌套数组中选择一些值并使它们成为更高级别的键值。 这是我拥有的数据和我想要的数据。

我拥有的数据；

[
{
    "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"
        }
    ]
}
]

我想要的数据；

[
{
    "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"        
}
]

到目前为止我所拥有的；

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

所以基本上我不需要嵌套数组，我只需要图像（或者可能是另一个属性）数据。 但是在数组中所有键都是相同的（你看到的代码和值）。 我尝试了一些映射，但无法到达那里。 所以我可以使用一些帮助。 提前致谢：）

Answer 1

为了提取image自定义属性，您必须find()其attribute_code为image的条目：

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

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

Answer 2

您的代码非常接近。 而不是检查!!attr ，我假设你的意思是找到具有属性的自定义attribute: "image" ：

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

此外，您可以使用object 解构和扩展 ( ... )来忽略output ZA8CFDE6331BD4B66AC96F8911 中的custom_attributes属性，而不是使用delete （这将改变原始对象）：C

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