Loops in a grouped by array of object by key

Question

This is a small example. Below, I have a list of data that is groupBy the type . After it is grouped , this is where I needed help. I want to loop through each of the types for display like in the html (*you may need to view full page when you run the code snippet b/c the small preview is not showing it all*). Anything that would help me move forward, it would be greatly appreciated!

 var samples = [ {id: 1, name: "apple", type: "fruits"}, {id: 2, name: "zucchini", type: "vegetables"}, {id: 3, name: "orange", type: "fruits"} ]; function groupBy(data, keyGetter) { const map = new Map(); data.forEach((item) => { const key = keyGetter(item); const collection = map.get(key); if (!collection) { map.set(key, [item]); } else { collection.push(item); } }); return map; } const grouped = groupBy(samples, sample => sample.type); console.log("grouped", grouped.get("fruits")); //It's unable to show the console log for just const grouped, so I'll attach the screenshot. I was able to see it in the inspect element window under 'console'

 <!--This should be handled dynammically with js--> <section> <h2>Fruits</h2> <div style="background: tomato"> <div>apple</div> <div>orange</div> </div> </section> <section> <h2>Vegetables</h2> <div style="background: tomato"> <div>zucchini</div> </div> </section>

Answer 1

explanations are in code as comments

 var samples = [ {id: 1, name: "apple", type: "fruits"}, {id: 2, name: "zucchini", type: "vegetables"}, {id: 3, name: "orange", type: "fruits"} ]; function groupBy(data, keyGetter) { const map = new Map(); data.forEach((item) => { const key = keyGetter(item); const collection = map.get(key); if (!collection) { map.set(key, [item]); } else { collection.push(item); } }); return map; } const grouped = groupBy(samples, sample => sample.type); const content = document.getElementById('content'); grouped.forEach((value, key) => { const section = document.createElement("section"); //creating section tag const h2 = document.createElement("h2"); //creating h2 tag const type = document.createTextNode(key.charAt(0).toUpperCase() + key.slice(1)); //creating type name with first latter in upper case eg Fruits const list = document.createElement("div"); // createing div which will contain list of type value.forEach(v => { // looping through each type list const text = document.createTextNode(v.name); // create name of list element list.appendChild(document.createElement("div").appendChild(text)); list.appendChild(document.createElement("br")); //add new line between list elements }); list.style.background = 'tomato'; h2.appendChild(type); section.appendChild(h2); section.appendChild(list); content.appendChild(section); });

 <div id="content"> </div>