如何使用javascript将json数据显示为html

Question

i have this php api,

$db_result_set = $db->prepare('SELECT p.Id, p.FirstName, p.MiddleName, p.LastName, p.Gender, p.Location, p.Email, p.Mobile,b.BookTitle, b.BookGenre, b.BookWriter, b.BookDescription FROM personaldetails AS p LEFT JOIN bookdetails AS b ON b.UserId = p.Id ORDER BY p.Id DESC');
$db_result_set->execute();

$final = [];
foreach ($db_result_set as $u) {


if (!is_array($final[$u["Id"]])) {    //line 14

        $final[$u["Id"]]= [
            "Id" => $u["Id"],
            "FirstName" => $u["FirstName"],
            "MiddleName" => $u["MiddleName"],
            "LastName" => $u["LastName"],
            "Gender" => $u["Gender"],
            "Location" => $u["Location"],
            "Email" => $u["Email"],
            "Mobile" => $u["Mobile"],
        ];
    }
    $final[$u["Id"]]["books"][] = [
        "BookTitle" => $u["BookTitle"],
        "BookGenre" => $u["BookGenre"],
        "BookWriter" => $u["BookWriter"],
        "BookDescription" => $u["BookDescription"],
     ];

}
echo "<pre>";
        print_r($final);
        echo "</pre>

";

which is creating this json data,

 Array
(
    [80] => Array
        (
        [Id] => 80
        [FirstName] => Ranjan
        [MiddleName] => Kumar
        [LastName] => Gupta
        [Gender] => Male
        [Location] => kolkata
        [Email] => [e-mail]
        [Mobile] => 1234567890
        [books] => Array
            (
                [0] => Array
                    (
                        [BookTitle] => one
                        [BookGenre] => one
                        [BookWriter] => one
                        [BookDescription] => one
                    )

                [1] => Array
                    (
                        [BookTitle] => two
                        [BookGenre] => two
                        [BookWriter] => two
                        [BookDescription] => two
                    )

                [2] => Array
                    (
                        [BookTitle] => three
                        [BookGenre] => three
                        [BookWriter] => three
                        [BookDescription] => three
                    )

                [3] => Array
                    (
                        [BookTitle] => four
                        [BookGenre] => four
                        [BookWriter] => four
                        [BookDescription] => four
                    )

                [4] => Array
                    (
                        [BookTitle] => five
                        [BookGenre] => FIVE
                        [BookWriter] => FIVE
                        [BookDescription] => FIVE
                    )

            )

    )

[79] => Array
    (
        [Id] => 79
        [FirstName] => Elon
        [MiddleName] => 
        [LastName] => Musk
        [Gender] => Male
        [Location] => New York
        [Email] => [e-mail]
        [Mobile] => 1234567890
        [books] => Array
            (
                [0] => Array
                    (
                        [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
                    )

                [1] => Array
                    (
                        [BookTitle] => a walk to remember
                        [BookGenre] => romance
                        [BookWriter] => peter
                        [BookDescription] => a wall in the rainy season where all 
                    )

            )

    )

i want to display it in html via iteration but getting some difficulty in doing so,

javascript in html,

        <!-- posting jason --->

    <div class="col-md-12">
        <div class="col-md-7">
            <script type=text/javascript>


                var loading = true; 
                var ListingCountPage=1;

                function loadData(){
                    var url = "http://localhost/ReadExchange/api.php";
                    $.getJSON(url,function(data) {



                    alert("Roger that"+JSON.stringify(data));



                    });
                }



        $(function() {
            loadData();

        });
        </script>

and also getting an error when i echoing data as json,

Notice: Undefined offset: 71 in /opt/lampp/htdocs/ReadExchange/api.php on line 14

i have commented line 14 in first snippet.

thanks in advance!

Answer 1

I would use PDO::FETCH_OBJ and json_encode() for this

$db_result_set = $db->prepare('SELECT p.Id, p.FirstName, p.MiddleName, p.LastName, p.Gender, p.Location, p.Email, p.Mobile,b.BookTitle, b.BookGenre, b.BookWriter, b.BookDescription FROM personaldetails AS p LEFT JOIN bookdetails AS b ON b.UserId = p.Id ORDER BY p.Id DESC');
$db_result_set->setFetchMode(PDO::FETCH_OBJ);
$db_result_set->execute();
while($obj = $db_result_set->fetch()) {  
    $arr[] = $obj;
}
if (count($arr) >= 1){
        echo '{"marker":'.json_encode($arr).'}';
}