如何使用 JQuery 从 JSON 中获取多个唯一值？

Question

我有这个 JSON：

var dataM = '[{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat03"}, {"category":"cat01","subcategory":"subcat03"},{"category":"cat01","subcategory":"subcat02"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat02"},{"category":"cat01","subcategory":"subcat05"}]';

我想获取唯一值并构建一个 HTML 无序列表结构，所以我做了这个：

var dataM = '[{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat03"}, {"category":"cat01","subcategory":"subcat03"},{"category":"cat01","subcategory":"subcat02"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat02"},{"category":"cat01","subcategory":"subcat05"}]';

var dataJSON = JSON.parse(dataM);
    var arrayM = []; var html='';

    for(i = 0; i< dataJSON.length; i++){    
        if(arrayM.indexOf(dataJSON[i].category) === -1){
            arrayM.push(dataJSON[i].category);        
        }        
    }

    html += '<ul>';

    for(i = 0; i< arrayM.length; i++){
        html += '<li>'+arrayM[i]+'</li>';
    }

    html += '</ul>';

$("#list").html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="list"></div>

问题是我只得到唯一的类别值：

我想像这样包含每个类别的唯一子类别值：

我该如何解决？我想得到你的帮助。

Answer 1

我建议不要使用数组，而是使用对象，这样您就可以在键上设置每个类别，将每个子类别推入一个数组。

然后，如果您只保留 unique 子猫，您可以使用该数组来显示它们：

var dataM = '[{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat03"}, {"category":"cat01","subcategory":"subcat03"},{"category":"cat01","subcategory":"subcat02"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat02"},{"category":"cat01","subcategory":"subcat05"}]';

var dataJSON = JSON.parse(dataM);
var arrayM = {}; 
var html='';

for(i = 0; i < dataJSON.length; i++) {
    if (!arrayM[dataJSON[i].category]) {
        arrayM[dataJSON[i].category] = [];
    }
    arrayM[dataJSON[i].category].push(dataJSON[i].subcategory);
}

html += '<ul>';

for (let [category, subcategorys] of Object.entries(arrayM)) {
    html += '<li>'+category+'</li>';
    html += '<ul>';
    subcategorys = subcategorys.filter((v, i, a) => a.indexOf(v) === i);
    for (i = 0; i < subcategorys.length; i++) {
        html += '<li>'+subcategorys[i]+'</li>';
    }
    html += '</ul>';
}

html += '</ul>';

$("#list").html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="list"></div>

Answer 2

为此，您可以使用reducer Reducer

通过使用reducer，你可以同时运行filter和map。

var dataM = [{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat01"},{"category":"cat01","subcategory":"subcat03"}, {"category":"cat01","subcategory":"subcat03"},{"category":"cat01","subcategory":"subcat02"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat04"},{"category":"cat02","subcategory":"subcat02"},{"category":"cat01","subcategory":"subcat05"}];

    
    result = dataM.reduce(function (r, a) {
        r[a.category] = r[a.category] || [];
        r[a.category].push(a.subcategory);
        return r;
    }, Object.create(null));

html = '<ul>';

Object.keys(result).map(keys => {
html += "<li>" + keys + ":"
html += "<ul>"
result[keys].map( data => {
 html += "<li>"+data+"</li>" 
})
html+="</ul>"
});
html +="</ul>"
$("#list").html(html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="list"></div>