Generate an array of arrays containing objects using different variable names

Question

Generate an array of arrays containing objects using different variable names

Here is the issue at hand:

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 am attempting to achieve a structure like this for each category and subCategory:

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

The challenge lies in figuring out how to configure this setup, I have exhausted all possible approaches:

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

javascript

Answer 1

Answer №1

To achieve the desired outcome, a more intricate restructuring of the data is required. A simple map function will not suffice as the new structure does not directly correspond to the current input.

const dataset = [
    { 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 reference = {}

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

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

console.log(reference)

Answer 2

To achieve the desired outcome, a more intricate restructuring of the data is required. A simple map function will not suffice as the new structure does not directly correspond to the current input.

const dataset = [
    { 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 reference = {}

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

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

console.log(reference)

Answer 3

Answer №2

Suppose you aim to categorize items based on their labelSlug, where all other attributes remain consistent if the labelSlug matches:

Initialize an empty object
Loop through the array:
Create any missing objects/arrays
Locate or create the object (with a default count of 0)
Increment the count
Repeat the process

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++
}

See the code in action below:

const data = [{
    labelSlug: 'cola',
    category: 'catering',
    subCategory: 'drinks',
    provider: 'coca cola'
  },
  // Additional data entries here...
]

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)

Answer 4

Suppose you aim to categorize items based on their labelSlug, where all other attributes remain consistent if the labelSlug matches:

Initialize an empty object
Loop through the array:
Create any missing objects/arrays
Locate or create the object (with a default count of 0)
Increment the count
Repeat the process

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++
}

See the code in action below:

const data = [{
    labelSlug: 'cola',
    category: 'catering',
    subCategory: 'drinks',
    provider: 'coca cola'
  },
  // Additional data entries here...
]

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)

Answer 5

Answer №3

Discover the versatility of JavaScript's Array.reduce() method! This powerful tool functions like a swiss army knife for array manipulation, allowing you to transform your array of objects in various ways.

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) => {
  // current item being iterated over
  const { category, subCategory, ...restOfData } = curr
  
  if (category in obj && subCategory in obj[category]) {
    const matchIdx = obj[category][subCategory].findIndex(o => o.labelSlug === restOfData.labelSlug)
    if (matchIdx > -1) {
      obj[category][subCategory][matchIdx].count++
    } else {
      obj[category][subCategory].push({ ...restOfData, count: 1 })
    }
  } 
  else {
    obj[category] = { 
      [subCategory]: [{ ...restOfData, count: 1 }],
    }
  }

  return obj 
}, {}) 

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
      }
    ]
  }
}
*/

Updated response to incorporate duplicate values with a dups count.

Answer 6

Discover the versatility of JavaScript's Array.reduce() method! This powerful tool functions like a swiss army knife for array manipulation, allowing you to transform your array of objects in various ways.

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) => {
  // current item being iterated over
  const { category, subCategory, ...restOfData } = curr
  
  if (category in obj && subCategory in obj[category]) {
    const matchIdx = obj[category][subCategory].findIndex(o => o.labelSlug === restOfData.labelSlug)
    if (matchIdx > -1) {
      obj[category][subCategory][matchIdx].count++
    } else {
      obj[category][subCategory].push({ ...restOfData, count: 1 })
    }
  } 
  else {
    obj[category] = { 
      [subCategory]: [{ ...restOfData, count: 1 }],
    }
  }

  return obj 
}, {}) 

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
      }
    ]
  }
}
*/

Updated response to incorporate duplicate values with a dups count.

Generate an array of arrays containing objects using different variable names

Answer №1

Answer №2

Answer №3

Similar questions

Modifying Div Size with Jquery

The Nuxt authentication middleware fails to function properly upon clicking the back button in the browser

How can I ensure that the elements inside the '.box' are responsive, including dropdown buttons, text, and more?

How to style date strings in JavaScript, jQuery, or CSS

Is it possible to compare two charts in Chart.js in a way that avoids the issue of small values appearing as large as big values?

What is the best way to structure a data object in Javascript or VueJs?

What is the best way to incorporate lottiefiles for a loading animation on a Next.js project's landing

"Obtaining a MEAN response after performing an HTTP GET

Move the Form to the Top of the Window and Highlight the First Input Field

Retrieving information from an Angular service using a specified function

What is the best way to rephrase a sentence that contains a double negative

Would it be beneficial to upload and download an image using the same ajax call?

Learning the process of obtaining tags through the utilization of the tag-it jQuery plugin

Displaying tooltips dynamically for newly added elements all sharing a common class in React

Learn how to extract data from the "this" object in JavaScript

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

What is the best way to upload multiple files using ASP.Net and Jquery?

Query Selector(jQuery selector) is a powerful tool for

span element causing border-spacing problem

Arrangement of div elements tailored to fit the size of the viewport