How to foreach unique value from a json array

Question

I have json array i want to foreach unique values form json array

JSON array

'[{"capacity":"4Seater","carname":"car1","price":"83"},
{"capacity":"4Seater","carname":"i10","price":"83"},
{"capacity":"4Seater","carname":"i20","price":"83"},
{"capacity":"8Seater","carname":"car3","price":"83"}]'

i have tried this

HTML

<select id="select1"></select>

jQuery code

$(document).ready(function(){
        var jsonstirn = '[{"capacity":"4Seater","carname":"car1","price":"83"},{"capacity":"4Seater","carname":"i10","price":"83"},{"capacity":"4Seater","carname":"i20","price":"83"},{"capacity":"8Seater","carname":"car3","price":"83"}]';
        var jsonarray = JSON.parse(jsonstirn);
        var capacity_val = ''
        $.each(jsonarray,function(i,item){
                capacity_val+='<option value="'+item.capacity+'">'+item.capacity+'</option>';
        });
        $('#select1').html(capacity_val);
    });

i have no idea what should i do. still i am searching solution.

Output i am looking for

<select id="select1">
    <option value="4Seater">4Seater</option>
    <option value="8Seater">8Seater</option>
</select>

in the select option there should show unique value of capacity — , May 04 '16 at 09:13
Possible duplicate of [How to get distinct values from an array of objects in JavaScript?](http://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript) — Jamie Barker, May 04 '16 at 09:48

score 1 · Answer 1 · answered May 04 '16 at 09:19

1

You can do it by combining Set, Spread operator and Array#map,

$(document).ready(function(){
  var jsonstirn = '[{"capacity":"4Seater","carname":"car1","price":"83"},{"capacity":"4Seater","carname":"i10","price":"83"},{"capacity":"4Seater","carname":"i20","price":"83"},{"capacity":"8Seater","carname":"car3","price":"83"}]';
  var jsonarray = JSON.parse(jsonstirn);

  //Set will hold unique set of elements.
  var uniqueCapacity = 
        [...new Set(jsonarray.map(v => v.capacity))]
          .map(v => '<option value="'+v+'">'+v+'</option>').join("");
 //Map the unique set of elements with required string values.

  $('#select1').html(uniqueCapacity );
});

DEMO

answered May 04 '16 at 09:19

Rajaprabhu Aravindasamy

66,513
17
101
130

it is working!!! but i have a question what is the use of '...new' i am not be able to understand i am trying to find the use or meaning of '...new' mean three **dot** . – May 04 '16 at 10:40
@VijayKumar That is a spread operator. It will be useful for us to convert an iterable object to an array. `new Set()` will return an iterable object and I just evaluated it by using the spread operator. These are all new installments to javascript. Are you from TN? – Rajaprabhu Aravindasamy May 04 '16 at 11:10
thanks :) for your reply but till now i am not understand properly i need to learn this. I am from Delhi. sir. – May 04 '16 at 11:20

score 1 · Accepted Answer · answered May 04 '16 at 11:50

Try this one.

you can use .map()

$(document).ready(function(){
    var jsonstirn = '[{"capacity":"4Seater","carname":"car1","price":"83"},{"capacity":"4Seater","carname":"i10","price":"83"},{"capacity":"4Seater","carname":"i20","price":"83"},{"capacity":"8Seater","carname":"car3","price":"83"}]';
    var jsonarray = JSON.parse(jsonstirn);

    var capacity_array = jsonarray.map(function(obj) { return obj.capacity; });
    capacity_array = capacity_array.filter(function(v,i) { return capacity_array.indexOf(v) == i; });

    var capacity_val = '';
    $.each(capacity_array,function(i,item){
            capacity_val+='<option value="'+item+'">'+item+'</option>';
    })

    $('#select1').html(capacity_val);
});

score 0 · Answer 3 · answered May 04 '16 at 09:15

0

In broader sense if you want unique for capacity property, you can try

var uniquesVals= [];

$.each(jsonstirn, function(index, value) {
    if ($.inArray(value.capacity, uniquesVals) === -1) {
        uniquesVals.push(value.capacity);
    }
});

answered May 04 '16 at 09:15

khushboo29

906
6
16

How to foreach unique value from a json array

3 Answers3

DEMO