display ajax called data in an UI

Question

i have been able to fetch data with an ajax call from active directory .

the php file used to make the ajax call to active directory :http://pastebin.com/tSRxwQL8

The browser console shows that an ajax call returns this :

<p> sn: xxxxxx<br/>givenname: xxxxx<br/>
   employeeID: 0050<br/
   >distinguishedName: CN=xxxx xxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxxxxx,DC=com<br/>
   displayName: Mark Hewettk<br/>sAMAccountName: xxxxxxx<br/>
   department: xxxxx<br/>manager: CN=xxxxxx xxxxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxx,DC=com
   <br/>
   mail: mhewettk@abc.com<br/>
   title: xyz<br/>

I want to take only some attributes above like mail,displayname etc and display in my HTML :

  <h2 class="profile__name" id="emailOfUser">Email : </h2>

Now the problem is the jquery that I have used here :

$('.leaderboard li').on('click', function() {
  $.ajax({
    url: "../popupData/activedirectory.php", // your script above a little adjusted
    type: "POST",
    data: {
        id: $(this).find('.parent-div').data('name')
    },
    success: function(data) {
        console.log(data);

        $('#popup').fadeIn();

        $('#emailOfUser').html(data); //this line displays all data whereas I want to select only email,displayname from the above console data



        //whatever you want to fetch ......
        // etc ..
    },
    error: function() {
        alert('failed, possible script does not exist');
    }
  });
});

problem is this :

$('#emailOfUser').html(data);

this line displays all data whereas I want to select only email,displayname from the above console data

kindly help me how to select only desired attribute data from the above browser console data.

Please add the `HTML` code and the `PHP` code in `activedirectory.php` — Ionut Necula, Jan 31 '17 at 08:11
You have returned html data from server. And here you want to access data using key, hence you need to return JSON. — Shubhranshu, Jan 31 '17 at 08:16
@Shubhranshu exactly but how do I do so .I tried to ammed it to JSON.B ut coulnot do so. — JAne, Jan 31 '17 at 08:18

score 0 · Answer 1 · answered Jan 31 '17 at 08:15

0

You are getting response in HTML which makes difficult for you to extract mail, displayname, etc. You should get the response in JSON which will make it easy for you to extract the required info. Ask your back-end team to send response in JSON format.

answered Jan 31 '17 at 08:15

DineshRS

29
4

Why will my backend send,when I am making an ajx call to the active directory. – JAne Jan 31 '17 at 08:20
Okay, so its much easier for you to send a response in JSON from your php file. This will optimize more as there won't be any string manipulation on getting the response. – DineshRS Jan 31 '17 at 10:49

score 0 · Accepted Answer · answered Jan 31 '17 at 08:21

0

Ideally you should return JSON from PHP file, however if it is not possible for you to make changes to PHP file then you can use split("mail:") and split("title:") to extract data

success: function(data) {
        console.log(data);

        $('#popup').fadeIn();

        var email=(data.split("mail:")[1]).split("title:")[0];
        $('#emailOfUser').html(email); //this line displays all data whereas I want to select only email,displayname from the above console data



        //whatever you want to fetch ......
        // etc ..
    },

answered Jan 31 '17 at 08:21

Mohd Asim Suhail

2,176
1
16
23

This works.it displays only the email.I kind of understand it.can u plz explain me how it works ? thanks a lot. – JAne Jan 31 '17 at 09:17
the data that u r getting on success of ajax is just a string received from PHP file, I am just splitting `data` by `mail:` so whole string will be divided into two parts one part will contain string before `mail:` and other part will contain string after `mail:`, then I am taking the second part `data.split("mail:")[1]` and splitting it again by `title:` to get the required emailId. – Mohd Asim Suhail Jan 31 '17 at 09:28
Thanks a lot.But I am struggling to display the photo i.e the thumbnail image.If u have any idea kindly share here.Anyways,thanks again.God bless ya. – JAne Jan 31 '17 at 09:37
Photo url is not returned in `data` , you have u remove comment ( // ) before PHP file and then u can use the same concept of splitting to get the url `var photoURL=data.split("photo:")[1];` if photo is last to be returned from PH file then this will work. – Mohd Asim Suhail Jan 31 '17 at 09:42

score 0 · Answer 3 · answered Jan 31 '17 at 08:21

Working Fiddle

Try :

 var lines = 'sn: xxxxxx<br/>givenname: xxxxx<br/>employeeID: 0050<br/>distinguishedName: CN=xxxxxxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxxxxx,DC=com<br/>displayName: Mark Hewettk<br/>sAMAccountName: xxxxxxx<br/>department: xxxxx<br/>manager: CN=xxxxxx xxxxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxx,DC=com<br/>mail:mhewettk@abc.com<br/>title:xyz<br/>'.split('<br/>');
  jQuery.each(lines, function() {
    var val = this;
    if (val.indexOf('mail') > -1)
     // alert(val.split(':')[1]); //Only for test
       $('#emailOfUser').html(val.split(':')[1]);
  });

thanks for the input. the data that you have here in var lines will be from the active directory ,which is dynamic.I have made an ajax call to fetch the data as can in the above JQuery.My point is how do I amend the above jQuery to display only those attributes i want to display in my UI.a slight modification here may work, which I am unable to figure out. — JAne, Jan 31 '17 at 09:22

display ajax called data in an UI

3 Answers3