Cooolranjan Cooolranjan - 6 months ago 8
Javascript Question

unable to display json data in html

i have this json data, i have crated two arrays and echoed it as json.
and want to display it in html using two loops by matching id of one array and userId of another array.

{"personaldetails":[{"id":"79","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"78","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"77","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"76","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"75","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"74","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"73","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"72","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"71","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"70","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"69","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"},{"id":"68","FirstName":"Elon","MiddleName":"","LastName":"Musk","Gender":"Male","Location":"New York","Email":"elonmusk@tesla.com","Mobile":"1234567890"}]}{"bookdetails":[{"UserId":"79","BookTitle":"who am i","BookGenre":"inspiration","BookWriter":"modi","BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"},{"UserId":"79","BookTitle":"a walk to remember","BookGenre":"romance","BookWriter":"peter","BookDescription":"a wall in the rainy season where all "},{"UserId":"78","BookTitle":"who am i","BookGenre":"inspiration","BookWriter":"modi","BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"},{"UserId":"78","BookTitle":"a walk to remember","BookGenre":"romance","BookWriter":"peter","BookDescription":"a wall in the rainy season where all "},{"UserId":"77","BookTitle":"who am i","BookGenre":"inspiration","BookWriter":"modi","BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"},{"UserId":"77","BookTitle":"a walk to remember","BookGenre":"romance","BookWriter":"peter","BookDescription":"a wall in the rainy season where all "},{"UserId":"76","BookTitle":"who am i","BookGenre":"inspiration","BookWriter":"modi","BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"},{"UserId":"76","BookTitle":"a walk to remember","BookGenre":"romance","BookWriter":"peter","BookDescription":"a wall in the rainy season where all "},{"UserId":"75","BookTitle":"who am i","BookGenre":"inspiration","BookWriter":"modi","BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"},{"UserId":"75","BookTitle":"a walk to remember","BookGenre":"romance","BookWriter":"peter","BookDescription":"a wall in the rainy season where all "},{"UserId":"74","BookTitle":"who am i","BookGenre":"inspiration","BookWriter":"modi","BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"},{"UserId":"74","BookTitle":"a walk to remember","BookGenre":"romance","BookWriter":"peter","BookDescription":"a wall in the rainy season where all "},{"UserId":"73","BookTitle":"who am i","BookGenre":"inspiration","BookWriter":"modi","BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"},{"UserId":"73","BookTitle":"a walk


but i am not getting this data in html neither by console.log nor javascript alert.

here is code;

function loadData(){
var url = "http://localhost/ReadExchange/api.php";
$.getJSON(url,function(data) {
console.log(data);
alert("hey got the data"+JSON.stringify(data));
});
}

$(function() {
loadData();
});


here is my api code;

$personal = $db->prepare('select Id,FirstName,MiddleName,LastName,Gender,Location,Email,Mobile from personaldetails ORDER BY Id DESC');
$personal->execute();
$json_data=array();



foreach($personal as $row)//foreach loop
{

$json_array['id']=$row['Id'];
$json_array['FirstName']=$row['FirstName'];
$json_array['MiddleName']=$row['MiddleName'];
$json_array['LastName']=$row['LastName'];
$json_array['Gender']=$row['Gender'];
$json_array['Location']=$row['Location'];
$json_array['Email']=$row['Email'];
$json_array['Mobile']=$row['Mobile'];
array_push($json_data,$json_array);


}

$books = $db->prepare('select UserId,BookTitle,BookGenre,BookWriter,BookDescription from bookdetails ORDER BY UserId Desc');
$books->execute();
$json_data1=array();

//$bookNo = 0;
foreach($books as $row)//foreach loop
{
//$bookNo++;
//$json_array1['BookNo']= $bookNo;
$json_array1['UserId']=$row['UserId'];
$json_array1['BookTitle']=$row['BookTitle'];
$json_array1['BookGenre']=$row['BookGenre'];
$json_array1['BookWriter']=$row['BookWriter'];
$json_array1['BookDescription']=$row['BookDescription'];

//here pushing the values in to an array
array_push($json_data1,$json_array1);

} header('Content-type: application/json');
echo json_encode(array("personaldetails"=>$json_data));
echo json_encode(array("bookdetails"=>$json_data1));
//echo json_encode($json_data1);

?>


thanks in advance!

Answer

You have to send only one JSON object, so not:

 echo json_encode(array("personaldetails"=>$json_data));
    echo json_encode(array("bookdetails"=>$json_data1));

But:

 echo json_encode(array(
       "personaldetails"=>$json_data,
       "bookdetails"=>$json_data1 
));