how to filter json data using jquery

Question

This my JSON data:

[{"id":"1","rawId":"1","displayName":"user name 1","name":{"familyName":"user","givenName":"name","formatted":"user name 1"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9874563210","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.user1.com"},{"id":"2","rawId":"1","displayName":"user name 2","name":{"familyName":"user","givenName":"name","formatted":"user name 2"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9632587410","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.yahoo.com"},{"id":"3","rawId":"1","displayName":"user name 3","name":{"familyName":"user","givenName":"name","formatted":"user name 3"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9858745852","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":null},{"id":"4","rawId":"1","displayName":"Distress Number","name":{"familyName":"Number","givenName":"Distress","formatted":"Distress Number"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"8547125693","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.goo.com"}]

javascript function onSuccess(a){for(var e="",l=0;l"+a[l].displayName+":"+a[l].phoneNumber[0].value+"";$("#setdata").html(e)}

i want to get displayName and phoneNumbers plz guide me how to filter json data

Answer 1

You can use .map() to create new array of objects with only the relevant content in it.

The following creates a new array of objects - with just the displayName and the phone numbers array for each user.

 var data = [{"id":"1","rawId":"1","displayName":"user name 1","name":{"familyName":"user","givenName":"name","formatted":"user name 1"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9874563210","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.user1.com"},{"id":"2","rawId":"1","displayName":"user name 2","name":{"familyName":"user","givenName":"name","formatted":"user name 2"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9632587410","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.yahoo.com"},{"id":"3","rawId":"1","displayName":"user name 3","name":{"familyName":"user","givenName":"name","formatted":"user name 3"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9858745852","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":null},{"id":"4","rawId":"1","displayName":"Distress Number","name":{"familyName":"Number","givenName":"Distress","formatted":"Distress Number"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"8547125693","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.goo.com"}] let details = data.map(item => { return {displayName: item.displayName, phoneNumbers: item.phoneNumbers}}) console.log(details)

Answer 2

Hello if you want jquery you can use each ( http://api.jquery.com/jquery.each/ ) ill append a working example displaying in a div display name + first phone number, if you want show all phone numbers you can add another each, let me know if you need help with that.

 let data = [{"id":"1","rawId":"1","displayName":"user name 1","name":{"familyName":"user","givenName":"name","formatted":"user name 1"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9874563210","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.user1.com"},{"id":"2","rawId":"1","displayName":"user name 2","name":{"familyName":"user","givenName":"name","formatted":"user name 2"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9632587410","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.yahoo.com"},{"id":"3","rawId":"1","displayName":"user name 3","name":{"familyName":"user","givenName":"name","formatted":"user name 3"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"9858745852","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":null},{"id":"4","rawId":"1","displayName":"Distress Number","name":{"familyName":"Number","givenName":"Distress","formatted":"Distress Number"},"nickname":null,"phoneNumbers":[{"id":"2","pref":false,"value":"8547125693","type":"other"}],"emails":null,"addresses":null,"ims":null,"organizations":null,"birthday":null,"note":null,"photos":null,"categories":null,"urls":"http://www.goo.com"}]; let content = ""; $.each(data, function(index, value){ content += value.displayName+" - "+value.phoneNumbers[0].value+"<br>"; }); $('#results').html(content);

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