Create array of arrays of objects with var names

Question

Here is my problem:

const data : [
{labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},
{labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},
{labelSlug: 'fanta', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},{labelSlug: 'activities1', category: 'activities', subCategory: 'activitiesSub1', provider: 'blabla'},
{labelSlug: 'activities2', category: 'activities', subCategory: 'activitiesSub1', provider: 'blabla'},
{labelSlug: 'equipments1', category: 'equipments', subCategory: 'equipmentsSub1', provider: 'blabla'},
{labelSlug: 'equipments2', category: 'equipments', subCategory: 'equipmentsSub2', provider: 'blabla'}
{labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},
]

I'm trying to get something like this for each category and subCategory:

{
  catering : [
    drinks : [
      { labelSlug: cola, provider: coca cola, count: 3 },
      { labelSlug: fanta, provider: coca cola, count: 1 }
    ]
  ]
}

The problem is I don't know how to set up this, I've tried all I could do:

const array = data.map((elem) => {
  const item = {};
  const sub = elem.subCategory;
  const cat = elem.category;

  // i've tried many things like that just to get everything in the right place (I didnt try to get the count part yet)
  // item[cat[sub]].labelSlug = elem.labelSlug;
  // item[cat][sub].labelSlug = elem.labelSlug;
  // item[cat[sub.labelSlug]] = elem.labelSlug;

  // const item = {
  //   [`${cat}`] : {
  //      [`${sub}`] : {
  //        labelSlug: elem.labelSlug
  //      } 
  //   }
  // }
  return item;
})

Leu · Accepted Answer · 2022-10-27 16:22:29Z

To achieve the desired results, you'll need a more complex restructure of the result than what is possible with a simple map call (as this new structure will not be 1 to 1 mappeable with the current input)

const data = [
    { labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola' },
    { labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola' },
    { labelSlug: 'fanta', category: 'catering', subCategory: 'drinks', provider: 'coca cola' }, { labelSlug: 'activities1', category: 'activities', subCategory: 'activitiesSub1', provider: 'blabla' },
    { labelSlug: 'activities2', category: 'activities', subCategory: 'activitiesSub1', provider: 'blabla' },
    { labelSlug: 'equipments1', category: 'equipments', subCategory: 'equipmentsSub1', provider: 'blabla' },
    { labelSlug: 'equipments2', category: 'equipments', subCategory: 'equipmentsSub2', provider: 'blabla' },
    { labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola' }
]


const dict = {}

for(const entry of data) {
    const { labelSlug, category, subCategory, provider } = entry
    dict[category] = dict[category] || {}
    dict[category][subCategory] = dict[category][subCategory] || []
    
    let item = { labelSlug, provider, count: 1 }
    const index = dict[category][subCategory].findIndex(e => e.labelSlug === labelSlug && e.provider === provider)

    if(index > -1) {
        dict[category][subCategory][index].count++
    }
    else {
        dict[category][subCategory].push(item)
    }
}

console.log(dict)

CherryDT · Accepted Answer · 2022-10-26 17:21:15Z

Assuming you want to group the items by their labelSlug and all the other properties will be the same if the labelSlug is the same:

Create an empty object
Iterate over the array:
Create any missing objects/arrays
Find or create the object (with count 0 by default)
Increase count
Repeat

const result = {}

for (const { category, subCategory, ...properties } of data) {
  result[category] ??= {}
  result[category][subCategory] ??= []
  const items = result[category][subCategory]

  let item = items.find(o => o.labelSlug === properties.labelSlug)
  if (!item) {
    item = { ...properties, count: 0 }
    items.push(item)
  }

  item.count++
}

Here you can see it in action:

const data = [{
    labelSlug: 'cola',
    category: 'catering',
    subCategory: 'drinks',
    provider: 'coca cola'
  },
  {
    labelSlug: 'cola',
    category: 'catering',
    subCategory: 'drinks',
    provider: 'coca cola'
  },
  {
    labelSlug: 'fanta',
    category: 'catering',
    subCategory: 'drinks',
    provider: 'coca cola'
  }, {
    labelSlug: 'activities1',
    category: 'activities',
    subCategory: 'activitiesSub1',
    provider: 'blabla'
  },
  {
    labelSlug: 'activities2',
    category: 'activities',
    subCategory: 'activitiesSub1',
    provider: 'blabla'
  },
  {
    labelSlug: 'equipments1',
    category: 'equipments',
    subCategory: 'equipmentsSub1',
    provider: 'blabla'
  },
  {
    labelSlug: 'equipments2',
    category: 'equipments',
    subCategory: 'equipmentsSub2',
    provider: 'blabla'
  },
  {
    labelSlug: 'cola',
    category: 'catering',
    subCategory: 'drinks',
    provider: 'coca cola'
  },
]

const result = {}

for (const { category, subCategory, ...properties } of data) {
  result[category] ??= {}
  result[category][subCategory] ??= []
  const items = result[category][subCategory]

  let item = items.find(o => o.labelSlug === properties.labelSlug)
  if (!item) {
    item = { ...properties, count: 0 }
    items.push(item)
  }

  item.count++
}

console.log(result)

Well, I learned something new from this one! Cool use of Logical nullish assignment (??=)

8ctopotamus · Accepted Answer · 2022-10-27 14:53:24Z

Check out JavaScripts's Array.reduce() method! It's kind of like the swiss army knife of array methods and you can use it to reduce or "transform" your array of objects into whatever you like!

const data = [
  {labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},
  {labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},
  {labelSlug: 'fanta', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},
  {labelSlug: 'activities1', category: 'activities', subCategory: 'activitiesSub1', provider: 'blabla'},
  {labelSlug: 'activities2', category: 'activities', subCategory: 'activitiesSub1', provider: 'blabla'},
  {labelSlug: 'activities2', category: 'activities', subCategory: 'activitiesSub1', provider: 'blabla'},
  {labelSlug: 'equipments1', category: 'equipments', subCategory: 'equipmentsSub1', provider: 'blabla'},
  {labelSlug: 'equipments2', category: 'equipments', subCategory: 'equipmentsSub2', provider: 'blabla'},
  {labelSlug: 'cola', category: 'catering', subCategory: 'drinks', provider: 'coca cola'},
]

const organizedData = data.reduce((obj, curr) => {
  // the current item we're on in the loop
  const { category, subCategory, ...restOfData } = curr
  
  // if our accumulator obj has the category key and that obj[category] has the subcategory key
  if (category in obj && subCategory in obj[category]) {
    // check if obj with matching slugLabel is in the obj[category][subCategory] array
    const matchIdx = obj[category][subCategory].findIndex(o => o.labelSlug === restOfData.labelSlug)
    if (matchIdx > -1) {
      // if it is, increase the count
      obj[category][subCategory][matchIdx].count++
    } else {
      // if not, push a new object with a starting count into the obj[category][subCategory] array
      obj[category][subCategory].push({ ...restOfData, count: 1 })
    }
  } 
  // if obj does not have the category to begin with...
  else {
    // lets set a category key on the object with a starting and assign a subCategory key and array of items as the value
    obj[category] = { 
      [subCategory]: [{ ...restOfData, count: 1 }],
    }
  }

  return obj // must return the accumulator for each iteration of the loop to be used in the next run
}, {}) 

console.log(organizedData)

/* Result:
{
  "catering": {
    "drinks": [
      {
        "labelSlug": "cola",
        "provider": "coca cola",
        "count": 3
      },
      {
        "labelSlug": "fanta",
        "provider": "coca cola",
        "count": 1
      }
    ]
  },
  "activities": {
    "activitiesSub1": [
      {
        "labelSlug": "activities1",
        "provider": "blabla",
        "count": 1
      },
      {
        "labelSlug": "activities2",
        "provider": "blabla",
        "count": 2
      }
    ]
  },
  "equipments": {
    "equipmentsSub2": [
      {
        "labelSlug": "equipments2",
        "provider": "blabla",
        "count": 1
      }
    ]
  }
}
*/

Edited answer to include a dups count.

Thanks @CherryDT! Answer has been edited to remove dups and instead include a count.

Collectives™ on Stack Overflow

Create array of arrays of objects with var names

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related