Nested map function returning array of objects with index as key value?

Question

I'm trying to reformat some data from an API and I'm having trouble getting it the way I need. I need everything to be flattened and my second map function (attMap) is returning them with the an index as the key value?

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

You can see my first map function (prodMap) works properly.

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

You can see the result in this image after merging them:

newArray = [];

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

Fiddle: https://jsfiddle.net/dkx9qewt/

I'm not the best programmer but is my attMap map function returning an array of objects because it's nested? Is that the issue?

Edit: The output I'm looking for is something like:

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

Instead of:

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

You should consider using console.log(JSON.stringify(obj)) to look at the actual object structure. Chrome's method of showing objects is often more confusing than it needs to be. — Heretic Monkey
– Heretic Monkey, Commented Sep 3, 2019 at 16:01
probably JSON.stringify(obj, null, 2) for better readability though :) — Mulan
– Mulan, Commented Sep 3, 2019 at 16:02
@user633183 The intended output would be for the key to be, Description, Short Description, Surname, etc.. instead of (0,1,2,3). Similar to how name and sku currently work. — user3330820
– user3330820, Commented Sep 3, 2019 at 16:04
Note the reason is likely because you're using map, which returns an array, which naturally has numeric indexes. You probably want to switch to reduce to build an object. — Heretic Monkey
– Heretic Monkey, Commented Sep 3, 2019 at 16:10

Mulan · Accepted Answer · 2019-09-03 16:24:14Z

Here's a technique that involves breaking the problem down into sensible parts -

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

Here's the output -

[ { 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' } },

  ... ]

If you just want name and sku inline with custom_attributes, consider this slight modification -

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

This matches your expected output -

[ { 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' },

  ... ]

I wrestled a bear once. · Accepted Answer · 2019-09-03 16:17:07Z

Array.map always returns an array, since what you want is a generic object, map is not what you want.

var 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"
                }
            ]
        }
    ]
}


var prodMap = [];
products.items.forEach( x => {
  var obj = {};
  x.custom_attributes.forEach( o => {
    obj[o.attribute_code] = o.value;
  });
  prodMap.push(obj);
});

console.log(prodMap);

Makyen · Accepted Answer · 2019-09-03 17:36:28Z

For those who are looking for code:

As suggested in the comments, the Object.assign() method (see MDN Docs) does the trick.

var modifiedAtt = attMap.map(item => item.reduce((acc, i)=> Object.assign({}, acc, i)))

this gives the expected output. Tested on node v10.12.0 with JavaScript.

For other readers:

Object.assign(target, sourceObj1, sourceObj2...) takes the first argument as the target and copy the values of all enumerable own properties of the other arguments (Objects) into the target Object, overwriting any that have the same key. Object.assign() returns the modified target Object.

The Array.reduce(function(sum, currentArrayValue, index, array), startValue) method (MDN) iterates over all values of an Array reducing the Array to a single value (sum). It takes a function as it's first argument, with the second, optional, argument being the starting value of the sum. The arguments for that function are an accumulator, the current value of the Array, the current index, and the Array itself. The function returns the new value of the accumulator, which is then passes to the function in the next iteration, or is the value returned from the .reduce() after the last Array value is operated upon.

Collectives™ on Stack Overflow

Nested map function returning array of objects with index as key value?

3 Answers 3

Comments

Comments

For those who are looking for code:

For other readers:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

For those who are looking for code:

For other readers:

Comments

Your Answer

Sign up or log in

Post as a guest

Related