Javascript - Trying to Group the Output

[revdave]

Hi all,

I have done a jQuery post to get a record set of popular products in varied categories

- then I am doing an .each loop to display the products.

But what I want is to somehow be able to group them by the category field so the display will look something like:

category 1

-- Product 1 (category 1 not shown)

-- Product 4 (category 1 not shown)

-- Product 27 (category 1 not shown)

category 2

-- Product 8 (category 2 not shown)

-- Product 2 (category 2 not shown)

-- Product 6 (category 2 not shown)

etc.

So I am not sure how to get this going in javascript.

Is there a way to create an array from what I have already to get a DISTINCT list of unique categories?

my simple idea is to do 2 loops:

loop 1 through the unique distinct categories

then within each - loop a second time to just display items that match THIS CATEGORY.

just a thought - any help would be appreciated.

[sinious]

Do you have any access to the API you're POSTing to which is generating the content? We've all done this kind of thing tons of times and sometimes the answer might be to refactor how your API is sending you data so it's correct everywhere it's sent. However I do not know if that endpoint is used by anything else that expects the format you currently have.

Otherwise you have it correct. You can nest loops although if it's a lot of results you can needlessly loop giant lists and slow down performance. If I have no API control, I'd typically generate a whole new object structure that matched what I wanted to display. Many of the frameworks today (Angular, etc) make use of data structures like this.

ES5 e.g., looping and building a structure you can work with

var results = [

     {

          category: "category name/id",

          products: [

               {

                    name: "product name",

                    SKU: "ABC123",

                     ...

               },

               {

                    ...

               }...

          ]

     },

     {

          category: "category name/id 2",

          products: [

                ...

          ]

     }...

];//end results

I don't know how long you end up keeping it in memory however. Since I do more Angular I tend to keep these things in memory and use angular repeaters to automatically build views based on hierarchies of data. If you do that, be sure to clear out the memory used from your original results after you build the structure you can work with.