How to set the values from the json response to the
fields in php and javascript?

Question

I am developing one web application where, there is one page, with the search bar, where one can search the projects by name. we'll get the list of projects or the desired project just below that search bar. Now when I click on the project name, I want to get the list of team members for that project to be visible just below that project details. I have the following code, I used 'post' call to call the backend and get the list of members for that project and get the result into JSON. Now I want to put these values to the <p> tags for that team member information. Following is the code:

In Index.php

<div id="members" class="list" style="display: none;">
    <div class="result">
        <div class="photo">
            <img>
        </div>
        <div class="team_info">
            <div class="tm">
                <div class="member_name">
                    <h5>Member Name</h5>
                    <p id="member_name"></p>
                </div> 
                <div class="prof">
                    <h5>profession</h5>
                    <p id="mem_profession"></p>
                </div>            
            </div>                 
        </div>
        <div class="contact_button">
            <h4 id="contact">See Contact</h4>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#project_name').on("click",function(){
        $.post('/teamMembers.php', {}, function(res){
            for(var i=0; i < res.length; i++ ){
                $('#member_name').val(res[i]['name']);
                $('#mem_profession').val(res[i]['profession']);
            }
            $('#members').show();
        });
    });
</script>

In teamMembers.php Controller file

<?php
if(isset($_SESSION['project_name'])){
            $project_name = $_SESSION['project_name'];

            $members = \Model\Team_Member::getList(['where'=>"project_name = '$project_name'"]);
            $this->toJson($members);
        }
?>

I have stored the project name in $_SESSION and I get the response of these json request in the following manner:

[{
    "name":"ABC",
    "email":"test@test.com",
    "phone":"9874563210",
    "project_name":"Test Project",
    "profession":"student",
    "id":1312
}]

After all this code, I am still facing some issues like: I am not able to see the any of the team members details, not even the label, even though I use .show() function. Another I am not sure if that was the correct way to set the values to the <p> element from the json response. Help is appreciated

[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Mar 05 '18 at 20:20
If an answer solved your problem, consider accepting the answer. Here's how http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work then return here and do the same with the tick/checkmark till it turns green. This informs the community, a solution was found. Otherwise, others may think the question is still open and may want to post (more) answers. You'll earn points and others will be encouraged to help you. *Welcome to Stack!* — Jay Blanchard, Mar 05 '18 at 20:28

Jay Blanchard · Accepted Answer · 2018-03-05T21:33:51.593

1

Paragraphs cannot have values, you need to set the text within them:

for(var i=0; i < res.length; i++ ){
    $('#member_name').html(res[i]['name']);
    $('#mem_profession').html(res[i]['profession']);
}

OR

for(var i=0; i < res.length; i++ ){
    $('#member_name').text(res[i]['name']);
    $('#mem_profession').text(res[i]['profession']);
}

If your markup repeats, you need to make sure each element has unique ID's. ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.

EDIT: I tested with the following code. You do not need the for() loop (unless you're planning to expand this, at which point the unique ID's come into play):

// you do not need the first couple of lines of code, was just used for testing
var json = '[{"name":"ABC","email":"test@test.com","phone":"9874563210","project_name":"Test Project","profession":"student","id":1312}]';
var res = JSON.parse(json);


$('#member_name').html(res[0]['name']);
$('#mem_profession').html(res[0]['profession']);
$('#members').show();

EDIT 2: If you have more than one member of a project you can append their data to each paragraph like this:

var json = '[{"name":"ABC","email":"test@test.com","phone":"9874563210","project_name":"Test Project","profession":"student","id":1312},{"name":"XYZ","email":"test@test.com","phone":"9874563210","project_name":"Test Project","profession":"teacher","id":1312}]';
var res = JSON.parse(json);
for(var i = 0; i < res.length; i++) {
    $('#member_name').append(res[i]['name'] + ', ');
    $('#mem_profession').append(res[i]['profession'] + ', ');
}

This results in output like this:

Member Name
ABC, XYZ,

profession
student, teacher,

edited Mar 05 '18 at 21:33

answered Mar 05 '18 at 20:25

Jay Blanchard

34,243
16
77
119

Thanks. But I am still struggling with showing the team members. I have used `style="display: none;"` and used `$('members').show();`, but yet still not able to see the details. – John Caverns Mar 05 '18 at 20:41
Shouldn't it be `$('#members').show();`, with the ID identifier? – Jay Blanchard Mar 05 '18 at 20:47
Yes, I mean to say `$('#members').show();` but still not working – John Caverns Mar 05 '18 at 20:48
Only one div with the id "members" – John Caverns Mar 05 '18 at 20:52
Can you see this hidden when you inspect the source of the page? – Jay Blanchard Mar 05 '18 at 20:59
Is there a link to the page where we can see it? – Jay Blanchard Mar 05 '18 at 21:20
Yes I was able to see hidden when I inspect. I tried closing the project, restart the server and it worked. It's wierd I don't know what was the problem. But if I have more than one members in one project than I am not able to see all the members. I am able to see only one. While in response I am getting all the members of that project. Do you think my loop is wrong ? – John Caverns Mar 05 '18 at 21:24
No, if you have more than one member then you have to make sure the ID's are unique or you have to append the values to the field. – Jay Blanchard Mar 05 '18 at 21:26
Even though I need to show it on the same div's, I need different id's for all the members ? If yes, how can I do that ? – John Caverns Mar 05 '18 at 21:27
Have a look at this code: https://jsfiddle.net/tru77h9q/20/ This *appends* data to each paragraph. Is that what you want? – Jay Blanchard Mar 05 '18 at 21:31
Something like this, but need to show one members details as one single row not alltogether. One member's details as one record – John Caverns Mar 05 '18 at 21:33
More like this https://jsfiddle.net/tru77h9q/22/? At this point it just becomes formatting. – Jay Blanchard Mar 05 '18 at 21:35
I will look at the formatting, thanks a lot Jay. I appreciate your help and suggestions. Thanks again – John Caverns Mar 05 '18 at 21:45
Glad to help @JohnCaverns – Jay Blanchard Mar 05 '18 at 21:51

How to set the values from the json response to the fields in php and javascript?

1 Answers1

How to set the values from the json response to the
fields in php and javascript?