如何使用JavaScript或Jquery在HTML中创建类似组的结构

我有这样的数据源

var source = [
    {
        group: "g-one",
        item: "one"
    },
    {
        group: "g-one",
        item: "two"
    },
    {
        group: "g-one",
        item: "three"
    },
    {
        group: "g-two",
        item: "aaa"
    },
    {
        group: "g-two",
        item: "bbb"
    }
];

由此，我需要创建一个这样的结构

<div id='g-one'>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</div>
<div id='g-two'>
    <div>aaa</div>
    <div>bbb</div>
</div>

一
二
三
aaa
bbb

---

请帮我解决这个问题

jQuery方式

首先让小组像这样离开：

var groups = $.unique($.map(source, function (n) {
    return n.group;
}));

迭代

组

数组并获得输出：

$.each(groups, function (i, data) {
    $("<div/>", {
        "id": data.group,
        "html": function () {
              var elmts = $.grep(source, function (a) {
                return a.group === data;
              });
              return $.map(elmts, function (n) {
                  return "<div>" + n.item + "</div>";
              }).join(" ");
         }
    }).appendTo("body");
});

演示：

var-source=[{组：“g-one”，项目：“one”}，{组：“g-one”，项目：“two”}，{组：“g-one”，项目：“two”}，{组：“g-two”，项目：“aaa”}，{组：“g-two”，项目：“bbb”}；
var a=新数组（）；
对于（var i=0；我能在没有jQuery的情况下单独使用JS吗？@AkbarAli现在检查答案。更新它。如果你想要一个只使用JS的解决方案，我建议你不要在问题中标记jQuery。谢谢你的努力。但是这里的情况略有不同。我在一个JS文件中，可以被视为“视图”从这里我以字符串的形式发送HTML元素，从main.js我将字符串附加到相应的元素，所以我希望以字符串的形式获得输出，有希望吗？因此，基本上，您将以字符串的形式生成问题中的输出u，将其传递到负责将其附加到元素的某个位置？是的，这就是ideaThank结构设计的s:）
    var group = source[0].group;
    var html = "<div id='" + group + "'>";
    var elemts = [];
    for (var i = 0; i <= source.length; i++) {
    if (i !== source.length) {
        if (group === source[i].group) {
            html += "<div>" + source[i].item + " </div>";
        } else {
            html += "</div>";
            elemts.push(html);
            group = source[i].group;
            html = "<div id='" + group + "'><div>" + source[i].item + " </div>";
        }
    } else {
        html += "</div>";
        elemts.push(html);
    }
}

var source = [ { group: "g-one", item: "one" }, { group: "g-one", item: "two" }, { group: "g-one", item: "three" }, { group: "g-two", item: "aaa" }, { group: "g-two", item: "bbb" } ]; 
    var a=new Array(); 
    for(var i=0;i<source.length;i++)
    {
        a[i]=source[i].group;   
    }
    b = {};
    for (var i = 0; i < a.length; i++) 
    {
        b[a[i]] = a[i];
    }
    c = [];
    for (var key in b) 
    {
        c.push(key);
    }
    var message = "";
    for(var i=0;i<c.length;i++)
    {
        message+="<div id = '"+c[i]+"'>"
        for(var j=0;j<source.length;j++)
        {
            if(c[i] == source[j].group)
            {
                message+="<div>"+source[j].item+"</div>";

            }


        }
        message+="</div>";
    }
    alert(message);