[JavaScript] Loop through Object, grouping every 4 items

[Brian Miller]

I have an object that looks like the following...

rawData = ['Pizza', 'Pepperoni', 'Veggie', 'Hawaiian', 'Coffee', 'Cappuccino', 'Mocha', 'Latte', 'CEOs', 'Tim Cook', 'Mark Zuckerberg', 'Satya Nadella', 'Thanksgiving Food', 'Turkey', 'Cranberry Sauce', 'Pumpkin Pie']

 

I'd like to convert into the following format using JS, but an not sure how to loop through it...

outputData = [
    {
        'category': 'Pizza',
        'example1': 'Pepperoni',
        'example2': 'Veggie',
        'example3': 'Hawaiian'
    },
    {
        'category': 'Coffee',
        'example1': 'Cappuccino',
        'example2': 'Mocha',
        'example3': 'Latte', 
    },
    {
        'category': 'CEOs',
        'example1': 'Tim Cook',
        'example2': 'Mark Zuckerberg',
        'example3': 'Satya Nadella'
    },
    {
        'category': 'Thanksgiving Food',
        'example1': 'Turkey',
        'example2': 'Cranberry Sauce',
        'example3': 'Pumpkin Pie'
    }
]

When you examine the "rawData" object, you'll notice it has 4 sets of data:

• (Item 1) Category Name.
• (Items 2, 3 and 4) 3 Examples from that Category.

Then the object repeats. 
 

In my example, I've included 4 sample data sets but I can imagine there could be an n number of them.

I'm awful at loops and this one of driving me nuts!  I hope someone can help me.

[+pmrd Subscriber²]

Here's a very simple, easy to read solution. Just use a while loop that runs until the array is empty and splice off 4 items at a time off the array after assigning your values to an new object and pushing it to the output array. No complicated for loops or messy index offsets.

 

let outputData = [];

while (rawData.length > 0) {

  outputData.push({
    category: rawData[0],
    example1: rawData[1],
    example2: rawData[2],
    example3: rawData[3]
  });

  rawData.splice(0,4);

}

 

If you need the rawData array to remain untouched just clone the array like this and use that array instead.

let rawClone = [...rawData];

 

I have a hard time believing these questions are for personal projects lol

Edited November 23, 2023 by PmRd

[Brian Miller]

Thanks! You made it so simple, I didn't think of doing that way.

And yes, this is a home project.  I'll publish my personal in a few weeks and you'll see. 😉 

[+pmrd Subscriber²]

On 23/11/2023 at 14:44, Brian Miller said:

Thanks! You made it so simple, I didn't think of doing that way.

And yes, this is a home project.  I'll publish my personal in a few weeks and you'll see. 😉 

Glad to help

[Brian Miller]

By the way, why did you use "LET" to define the variable, and not a "VAR"?

Is there a difference?

[+pmrd Subscriber²]

On 23/11/2023 at 14:47, Brian Miller said:

By the way, why did you use "LET" to define the variable, and not a "VAR"?

Is there a difference?

Force of habit lol, I usually always work with classes. In this scenario var would work, but if you put that code inside a function that returns the array you're better off using let since it will limit those variables to the scope of the function. I only use var for global variables.

[Brian Miller]

On 23/11/2023 at 13:50, PmRd said:

Force of habit lol, I usually always work with classes. In this scenario var would work, but if you put that code inside a function that returns the array you're better off using let since it will limit those variables to the scope of the function. I only use var for global variables.

Thank you.

I'm learning more and more every day.

[+pmrd Subscriber²]

You can do neat stuff like this with let, a scope a basically { anything inside brackets }, and yes you can just put plain brackets anywhere you want. 

{ // scope 1
  
  let test = "test 1";
  let boop = "boop";
  var meep = "meep";
  
  { // scope 2
    
    console.log(boop); //this would return "boop" because this scope is nested therefore it can access variables from its parent scope.
    console.log(test); //however, this would raise an error because a variable with the same name is declared lower in this scope
    let test = "test 2"; // this test variable will only exist in scope 2 and doesn't affect test in scope 1
    console.log(test); //this would return "test 2"
    
  } // scope 2 end
  
  console.log(test); //this would return "test 1" because we are back in scope 1

} // scope 1 end


console.log(meep); //this would return "meep" because var is always global even when delcared inside a scope
console.log(test); //this would raise an error because we are outside scope 1 

It's best practice and saves a lot of headaches to use let inside loops and for temporary variables inside a function. Hope this helps!

Edited November 23, 2023 by PmRd

[Brian Miller]

It does help thank you.  

Since I've retired, I've focused on JS.