Displaying Values of JSON Array in Table

Question

I am trying to display the values of an array I created in a table. The original solution I built was made to display a single value of the array that had an exact match to an ID in the array. You can view this at (http://www.users.miamioh.edu/chaudha/cse252/assignment92/). Typing in "jjones" will display a result.

I modified this solution to accept partial queries as well as display every value that fits under the partial query (Note: http://www.users.miamioh.edu/chaudha/cse252/assignment9/service/people/jj versus http://www.users.miamioh.edu/chaudha/cse252/assignment92/service/people/jj). I began running into issues in regards to parsing the array into the table. The end goal is to display a list of people that meet the partial query. I am trying to figure out what needs to be altered in the Javascript in order to accomplish this.

My JS is as follows:

$(document).ready( function () {
$("#searchClassmates").keyup(function(){
    var searchValue = document.getElementById('searchClassmates').value;
    $.getJSON("http://www.users.miamioh.edu/chaudha/CSE252/Assignment9/service/people/" + searchValue, function (json) {
        for(var i = 0; i < json.length; i++) {
            $("<tr>").appendTo("#classMateResults");
            $("<td>" + json[i].firstName  + "</td>").appendTo("#classMateResults");
            $("<td>" + json[i].lastName  + "</td>").appendTo("#classMateResults");
            $("<td>" + json[i].age  + "</td>").appendTo("#classMateResults");
            $("<td>" + json[i].major  + "</td>").appendTo("#classMateResults");
            $("<td>" + json[i].phone  + "</td>").appendTo("#classMateResults");
            $("<td>" + json[i].email  + "</td>").appendTo("#classMateResults");
            $("<td>" + json[i].state  + "</td>").appendTo("#classMateResults");
            $("</tr>").appendTo("#classMateResults");
        }
    });
  });
});

The table:

$people = array(
'jjones' => array('firstName' => 'Jim', 'lastName' => 'Jones', 'age' => 20, 'major' => 'Computer Science', 'phone' => '212-460-9393', 'email' => '[email protected]', 'state' => 'OH'),
'asmith' => array('firstName' => 'April', 'lastName' => 'Smith', 'age' => 19, 'major' => 'Mechanical Engineering', 'phone' => '913-939-3929', 'email' => '[email protected]', 'state' => 'WY'),
'pstemple' => array('firstName' => 'Pat', 'lastName' => 'Stemple', 'age' => 21, 'major' => 'Theater Performance', 'phone' => '917-222-2232', 'email' => '[email protected]', 'state' => 'NY'),
'jjones1' => array('firstName' => 'Janet', 'lastName' => 'Jones', 'age' => 22, 'major' => 'Botany', 'phone' => '817-332-9392', 'email' => '[email protected]', 'state' => 'CA'),
'llerner' => array('firstName' => 'Leon', 'lastName' => 'Lerner', 'age' => 18, 'major' => 'Biology', 'phone' => '315-444-3494', 'email' => '[email protected]', 'state' => 'OH'),
'mmeyer' => array('firstName' => 'Margret', 'lastName' => 'Meyer', 'age' => 24, 'major' => 'Interactive Media Studies', 'phone' => '219-333-0303', 'email' => '[email protected]', 'state' => 'OH'),
'achaudhry' => array('firstName' => 'Anik', 'lastName' => 'Chaudhry', 'age' => 19, 'major' => 'Management Information Systems', 'phone' => '914-555-5555', 'email' => '[email protected]', 'state' => 'NY'),
'sdogg' => array('firstName' => 'Snoop', 'lastName' => 'Dogg', 'age' => 42, 'major' => 'Botany', 'phone' => '414-333-2433', 'email' => '[email protected]', 'state' => 'CA'),
'bclinton' => array('firstName' => 'Bill', 'lastName' => 'Clinton', 'age' => 25, 'major' => 'Political Science', 'phone' => '933-440-3033', 'email' => '[email protected]', 'state' => 'AK'),);

PHP

function display_person($query) {
global $people;
$foundid = array();
foreach ($people as $k => $v)
if (stripos($k, $query) !== false)
{
    $foundid[$k] = $v;
}
if(count($foundid) > 0) {
    header('Content-type: application/json');
    echo json_encode($foundid); // NOTE: you need to change your JS code to accept array instead of 1 person
} else {
    header('HTTP/1.1 404 Not Found');
}}

Community · Accepted Answer · 2017-05-23 12:28:35Z

1

The problem is that your json answer does not have a length properly. Try adding a

console.log(json.length);

before the loop in your javascript.

You can find an answer to a similar question here:

get size of json object

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Apr 29, 2014 at 8:02

XPotau

1014 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying Values of JSON Array in Table

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related