combining key values in object of an array

Question

I am looking to combine all the key values in the objects of this array.

var currentInventory = [
  {
    name: 'Brunello Cucinelli',
    shoes: [
      {name: 'tasselled black low-top lace-up', price: 1000},
      {name: 'tasselled green low-top lace-up', price: 1100},
      {name: 'plain beige suede moccasin', price: 950},
      {name: 'plain olive suede moccasin', price: 1050}
    ]
  },
  {
    name: 'Gucci',
    shoes: [
      {name: 'red leather laced sneakers', price: 800},
      {name: 'black leather laced sneakers', price: 900}
    ]
  }
];

the end result should be:

[
  ['Brunello Cucinelli', 'tasselled black low-top lace-up', 1000],
  ['Brunello Cucinelli', 'tasselled green low-top lace-up', 1100],
  // ...
]

I have the following code:

function renderInventory(inventory) {
  const arr = [];
  for (var i = 0; i < inventory.length; i++) {
    for (var n = 0; n < inventory[i].shoes.length; n++) {
      arr.push([inventory[i].name + ', ' + inventory[i].shoes[n].name + ', ' + inventory[i].shoes[n].price]);
    }
  }
  return arr;
}

and it gives me the result of:

[
  ['Brunello Cucinelli, tasselled black low-top lace-up, 1000'],
  ['Brunello Cucinelli, tasselled green low-top lace-up, 1100'],
...
]

I'm not sure what to do so the quotations wraps around each element rather than the whole array.

Answer 1

First you need to collect sub-array shoes and flat it. then use map function to structure the way you want.

Here the code

const currentInventory = [
  {
    name: "Brunello Cucinelli",
    shoes: [
      { name: "tasselled black low-top lace-up", price: 1000 },
      { name: "tasselled green low-top lace-up", price: 1100 },
      { name: "plain beige suede moccasin", price: 950 },
      { name: "plain olive suede moccasin", price: 1050 }
    ]
  },
  {
    name: "Gucci",
    shoes: [
      { name: "red leather laced sneakers", price: 800 },
      { name: "black leather laced sneakers", price: 900 }
    ]
  }
];

const flatten = currentInventory
  .reduce((flat, inventory) => {
    flat.push(inventory.shoes);
    return flat;
  }, [])
  .flat();

const result = flatten.map(({ name, price }) => {
  return [name, price];
});

console.log(result);

shorter version

const result = currentInventory
  .reduce((flat, { shoes }) => {
    flat.push(shoes);
    return flat;
  }, [])
  .flat()
  .map(({ name, price }) => [name, price]);

Answer 2

Array.prototype.reduce(), Array.prototype.map() and Array.prototype.concat():

const currentInventory = [{name: 'Brunello Cucinelli',shoes: [{name: 'tasselled black low-top lace-up', price: 1000},{name: 'tasselled green low-top lace-up', price: 1100},{name: 'plain beige suede moccasin', price: 950},{name: 'plain olive suede moccasin', price: 1050}]},{name: 'Gucci',shoes: [{name: 'red leather laced sneakers', price: 800},{name: 'black leather laced sneakers', price: 900}]}];
const result = currentInventory.reduce((a, c) => [].concat(a, c.shoes.map(s => ([c.name, s.name, s.price]))), [])

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

You could use flatMap to take each outer object and extract the name and the mapped shoes array from each:

var currentInventory = [
  {
    name: 'Brunello Cucinelli',
    shoes: [
      {name: 'tasselled black low-top lace-up', price: 1000},
      {name: 'tasselled green low-top lace-up', price: 1100},
      {name: 'plain beige suede moccasin', price: 950},
      {name: 'plain olive suede moccasin', price: 1050}
    ]
  },
  {
    name: 'Gucci',
    shoes: [
      {name: 'red leather laced sneakers', price: 800},
      {name: 'black leather laced sneakers', price: 900}
    ]
  }
];
const output = currentInventory.flatMap(
  ({ name, shoes }) => shoes.map(
    shoe => [name, shoe.name, shoe.price]
  )
);
console.log(output);

<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.flatMap"></script>

Answer 4

You need to return just an array with items, not a joined string.

arr.push([inventory[i].name, inventory[i].shoes[n].name,  inventory[i].shoes[n].price]);

function renderInventory(inventory) {
  const arr = [];
  for (var i = 0; i < inventory.length; i++) {
    for (var n = 0; n < inventory[i].shoes.length; n++) {
      arr.push([inventory[i].name, inventory[i].shoes[n].name,  inventory[i].shoes[n].price]);
    }
  }
  return arr;
}

var currentInventory = [{ name: 'Brunello Cucinelli', shoes: [{ name: 'tasselled black low-top lace-up', price: 1000 }, { name: 'tasselled green low-top lace-up', price: 1100 }, { name: 'plain beige suede moccasin', price: 950 }, { name: 'plain olive suede moccasin', price: 1050 }] }, { name: 'Gucci', shoes: [{ name: 'red leather laced sneakers', price: 800 }, { name: 'black leather laced sneakers', price: 900 }] }];

console.log(renderInventory(currentInventory));

.as-console-wrapper { max-height: 100% !important; top: 0; }

A shorter approach by taking the the destructured values.

function renderInventory(inventory) {
    return inventory.reduce((r, { name: item, shoes }) => [
        ...r,
        ...shoes.map(({ name, price }) => [item, name, price])
    ], []);
}

var currentInventory = [{ name: 'Brunello Cucinelli', shoes: [{ name: 'tasselled black low-top lace-up', price: 1000 }, { name: 'tasselled green low-top lace-up', price: 1100 }, { name: 'plain beige suede moccasin', price: 950 }, { name: 'plain olive suede moccasin', price: 1050 }] }, { name: 'Gucci', shoes: [{ name: 'red leather laced sneakers', price: 800 }, { name: 'black leather laced sneakers', price: 900 }] }];

console.log(renderInventory(currentInventory));

.as-console-wrapper { max-height: 100% !important; top: 0; }