How can I get multiple unique values from a JSON with JQuery?

Question

I have this 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"}]';

I want to get unique values and build an HTML unordered list structure , so I make this:

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>

The problem is I only get the unique category values:

And I want to include the unique subcategory values of each category like this:

How can I fix it? I'd like to receive your help.

score 0 · Accepted Answer · answered Jun 18 '21 at 20:27

Instead off using an array, I'd recommend using an object so you can set each category on the key, push each subcategory into an array.

Then, if you only keep the unique subcats, you can use that array to show them:

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>

Himanshu Saxena · Answer 2 · 2021-06-18T20:48:57.433

0

For this you can make use of reducer Reducer

By making use of reducer you can run filter and map together.

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>

edited Jun 18 '21 at 20:48

answered Jun 18 '21 at 20:30

Himanshu Saxena

340
3
13

Great use of reduce! OP is looking for 'unique values', so maybe you could implement that into your solution? – 0stone0 Jun 18 '21 at 20:33
sure OStone, will update my answer with OP – Himanshu Saxena Jun 18 '21 at 20:38
Hi @Ostones, I have updated the code with expected OP – Himanshu Saxena Jun 18 '21 at 20:50
Thank you for your help, but I see subcats repeated, It must be unique – NekoLopez Jun 18 '21 at 21:13

How can I get multiple unique values from a JSON with JQuery?

2 Answers2