CODEWITHSUNDEEP
javascriptphpjqueryjson
harishannam
harishannam

Reputation: 2796

Take Distinct values to populate Drop down

   { "Result": { "tags": [ { "name": "ABC", "email": "[email protected]", "sms": 123 }, { 
"name": "ABC", "email": "[email protected]", "sms": 456 }, { "name": "ABC", "email": 
"[email protected]", "sms": 789 }, { "name": "XYZ", "email": "[email protected]", "sms": 976 
}, { "name": "ABC", "email": "[email protected]", "sms": 543 } ] } }

I have a JSON data like this. I want to Parse this JSON in PHP or Javascript to populate them in three drop downs.

Name | Email | SMS

But I need to Populate the distinct names in the dropdowns and populate email and sms based on selecting the name.

So far I just created the dropdowns.

Fiddle Link : http://jsfiddle.net/CAB2z/

Example:

Name should have : ABC | XYZ only once (Distinct : Should not repeat the same value). When we select ABC, the three emails and phone numbers for "ABC" from the JSON should be populated in the second and third dropdown.

Upvotes: 0

Views: 4201

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$(function(){
    var json = {
        "Result": {
            "tags": [{"name": "ABC","email": "[email protected]","sms": 123},
            {"name": "ABC","email": "[email protected]","sms": 456},
            {"name": "ABC","email":"[email protected]","sms": 789},
            {"name": "XYZ","email": "[email protected]","sms": 976},
            {"name": "XYZ","email": "[email protected]","sms": 543}]
         }
    };

    var name = [],obj = {};
    $(json.Result.tags).each(function (k, v) {
        name[k] = (v.name);
        obj[k] = {name: v.name,email: v.email,sms: v.sms};
    });
    $($.unique(name)).each(function (i, v) {
        $('#name').append('<option value="'+v+'">'+v+'</option>');
    });
    $('#name').on('change', function () {
       var $that = $(this);
       $('#email').html('');$('#sms').html('');
       $.each(obj,function (i, v) {
          if( $that.val() == v.name) {
             $('#email').append('<option value="'+v.email+'">'+v.email+'</option>');
             $('#sms').append('<option value="'+v.sms+'">'+v.sms+'</option>');
          }
       });
    }).change();
});

Live Demo

Upvotes: 1

eje211
eje211

Reputation: 2429

In JavaScript, with jQuery, you can do:

var names, emails, smses;

(function() {
  data = JSON.parse(data); // Get the data formatted.
  var result = {
    name:  {},
    email: {},
    sms:   {}
  };
  $.each(data.Result.tags, function(index, value) {
    result.name [value.name]  = true; // True won't be used, it can be any value.
    result.email[value.email] = true;
    result.sms  [value.sms]   = true
  });
  names  = Object.keys(result.name);
  emails = Object.keys(result.email);
  smses  = Object.keys(result.sms);
} ()); // Temporary variables (like result) are destroyed.
// names, emails and smses contain your data.

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

It will returns all results you want. Just append the vaues in dropdown its your part.

var resultArray = r.Result.tags;

var unique = {};
var distinctName = [];
var email = [];
var sms = [];

for( var i in resultArray ){
 if( typeof(unique[resultArray[i].name]) == "undefined"){
  distinctName.push(resultArray[i].name);  // push the unique names into the array

 }
 unique[resultArray[i].name] = 0;
     email.push(resultArray[i].email);  // push the email into the array
     sms.push(resultArray[i].sms)       // push the sms into the array
}

console.log(distinctName);
console.log(email);
console.log(sms);

Upvotes: 1

Related Questions