CODEWITHSUNDEEP
jqueryjson
user6216508
user6216508

Reputation:

How to foreach unique value from a json array

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>

Upvotes: 2

Views: 559

Answers (3)

Ajay Kumar
Ajay Kumar

Reputation: 1352

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);
});

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

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

Upvotes: 1

khushboo29
khushboo29

Reputation: 916

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);
    }
});

Upvotes: 0

Related Questions