javascript - 嵌套映射函数返回以索引作为键值的对象数组？

Question

我正在尝试从 API 重新格式化一些数据，但无法按照我需要的方式获取数据。我需要将所有内容展平，而我的第二个映射函数(attMap)正在返回它们并以索引作为键值？

var attMap = products.items.map( x => x.custom_attributes.map( y => ( {[y.attribute_code]: y.value} )));

你可以看到我的第一个 map 功能(prodMap)工作正常。

var prodMap = products.items.map( x => ({ name: x.name, sku: x.sku }));

合并后您可以在此图像中看到结果:

newArray = [];

prodMap.forEach((itm, i)=> {
  newArray.push(Object.assign({}, itm, attMap[i]));
});

fiddle :https://jsfiddle.net/dkx9qewt/

我不是最好的程序员，但我的 attMap 映射函数是否返回一个对象数组，因为它是嵌套的？是这个问题吗？

编辑:我正在寻找的输出类似于:

["Description":"Product Description","Short Description":"shortdescription","Surname":"surname","Length":"6","Tip Configuration":"Blunt","Instrument Type":"Hemostatic Forceps","Curvature":"Curved","Working Surface Style":"Serrated with Longitudinal Groove","Handle":"Finger Rings","Material":"Stainless Steel","Disposable or Reusable":"Reusable",Sterile or Non-Sterile":"Non-Sterile","Latex or Latex-Free":"Latex-Free","Grade":"Premium OR-Grade","name":"Product 1","sku":"4242"}

而不是:

[{"0":{"Description":"Product Description"},"1":{"Short Description":"shortdescription"},"2":{"Surname":"surname"},"3":{"Length":"6"},"4":{"Tip Configuration":"Blunt"},"5":{"Instrument Type":"Hemostatic Forceps"},"6":{"Curvature":"Curved"},"7":{"Working Surface Style":"Serrated with Longitudinal Groove"},"8":{"Handle":"Finger Rings"},"9":{"Material":"Stainless Steel"},"10":{"Disposable or Reusable":"Reusable"},"11":{"Sterile or Non-Sterile":"Non-Sterile"},"12":{"Latex or Latex-Free":"Latex-Free"},"13":{"Grade":"Premium OR-Grade"},"name":"Product 1","sku":"4242"}

Answer 1

这是一种将问题分解为合理部分的技术 -

const products =
  {items:[{id:0,sku:"4242",name:"Product 1",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5252",name:"Product 2",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"4243",name:"Product 3",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5254",name:"Product 4",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]}]}

const flattenAttributes = ({ custom_attributes = [], ...product }) =>
{ const mergeAttribute = (r = {}, { attribute_code = "", value = "" }) =>
    Object.assign(r, { [attribute_code]: value })

  const flat =
    custom_attributes.reduce(mergeAttribute, {})

  return { ...product, custom_attributes: flat } 
}

console.log(products.items.map(flattenAttributes))

这是输出 -

[ { id: 0,
    sku: '4242',
    name: 'Product 1',
    attributeSetId: 0,
    price: 0,
    status: 0,
    visibility: 0,
    typeId: 'string',
    createdAt: 'string',
    updatedAt: 'string',
    weight: 0,
    extensionAttributes: [],
    productLinks: [],
    options: [],
    mediaGalleryEntries: [],
    tierPrices: [],
    custom_attributes:
     { Description: 'Product Description',
       'Short Description': 'shortdescription',
       Surname: 'surname',
       Length: '6',
       'Tip Configuration': 'Blunt',
       'Instrument Type': 'Hemostatic Forceps',
       Curvature: 'Curved',
       'Working Surface Style': 'Serrated with Longitudinal Groove',
       Handle: 'Finger Rings',
       Material: 'Stainless Steel',
       'Disposable or Reusable': 'Reusable',
       'Sterile or Non-Sterile': 'Non-Sterile',
       'Latex or Latex-Free': 'Latex-Free',
       Grade: 'Premium OR-Grade' } },

  ... ]

<小时/>

如果您只想将 name 和 sku 与 custom_attributes 内联，请考虑进行此细微修改 -

const products =
  {items:[{id:0,sku:"4242",name:"Product 1",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5252",name:"Product 2",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"4243",name:"Product 3",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5254",name:"Product 4",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]}]}
  
const flattenAttributes = ({ name = "", sku = "", custom_attributes = [] }) =>
{ const mergeAttribute = (r = {}, { attribute_code = "", value = "" }) =>
    Object.assign(r, { [attribute_code]: value })

  const flat =
    custom_attributes.reduce(mergeAttribute, {})

  return { ...flat, name, sku } 
}

console.log(products.items.map(flattenAttributes))

这符合您的预期输出 -

[ { Description: 'Product Description',
    'Short Description': 'shortdescription',
    Surname: 'surname',
    Length: '6',
    'Tip Configuration': 'Blunt',
    'Instrument Type': 'Hemostatic Forceps',
    Curvature: 'Curved',
    'Working Surface Style': 'Serrated with Longitudinal Groove',
    Handle: 'Finger Rings',
    Material: 'Stainless Steel',
    'Disposable or Reusable': 'Reusable',
    'Sterile or Non-Sterile': 'Non-Sterile',
    'Latex or Latex-Free': 'Latex-Free',
    Grade: 'Premium OR-Grade',
    name: 'Product 1',
    sku: '4242' },

  ... ]