无法使用 PHP 和 Angular JS 获取 JSON 数据

Question

I'm passing ID to fetch JSON encode data using Angular JS.

Here is my controller:

    dhmsApp.controller('dhmsDetailsView',function($scope,$http, $routeParams){
     $http.get("include/detailViewBg.php", {params: {id: $routeParams.id}})
        .success(function (response) {$scope.details = response});
});

Here is my PHP SELECT Query code (detailViewBg.php) from which JSON is getting Encoded

    <?php
include("../include/connection_string.php");

$id = $_GET['id'];

$sql = mysqli_query($db, "SELECT * FROM dhms_requirement where id='".$id."'");
if(mysqli_num_rows($sql)){ 
    $data = array();
    while($row = mysqli_fetch_array($sql)){
        $data[] = array(
                'id' => $row['id'],
            'rClientName' => $row['rClientName'],
            'rContactNumber' => $row['rContactNumber'],
            'rCompanyName' => $row['rCompanyName'],
            'rEmail' => $row['rEmail'],
            'rRequirement' => $row['rRequirement'],
        );
    }
    header('Content-type: application/json');
    echo json_encode($data);
}

$sqlDomain = mysqli_query($db, "SELECT * FROM dhms_domain_details where id='".$id."'");
if(mysqli_num_rows($sqlDomain)){
    $dataDomain = array();
    while($rowDomain = mysqli_fetch_array($sqlDomain)){
        $dataDomain[] = array(
                'id' => $rowDomain['id'],
            'dSelectDomain' => $rowDomain['dSelectDomain'],
            'dDomainName' => $rowDomain['dDomainName'],
            'dRegisterDomainFrom' => $rowDomain['dRegisterDomainFrom'],
            'dStartDate' => $rowDomain['dStartDate'],
            'dEndDate' => $rowDomain['dEndDate'],
            'dRegistrationFor' => $rowDomain['dRegistrationFor'],
        );
    }
    header('Content-type: application/json');
    echo json_encode($dataDomain);
}



?>

Here is my HTML page where I'm fetching my data

 <div class="panel-body" ng-repeat="u in details track by $index">
                    <div class="col-lg-6">
                        <ul class="list-group">
                            <li class="list-group-item"><strong>Req. NO.</strong> : {{u.id}}</li>
                            <li class="list-group-item"><strong>Contact Number</strong> : {{u.rContactNumber}}</li>
                            <li class="list-group-item"><strong>Email Address</strong> : {{u.rEmail}}</li>
                        </ul>
                    </div>
                    <div class="col-lg-6">
                        <ul class="list-group">
                            <li class="list-group-item"><strong>Client Name</strong> : {{u.rClientName}}</li>
                            <li class="list-group-item"><strong>Compnay Name</strong> : {{u.rCompanyName}}</li>
                            <li class="list-group-item"><strong>Requirement</strong> : {{u.rRequirement}}</li>

                        </ul>
                    </div>
                </div>
<div class="panel-body" ng-repeat="u in details track by $index">
            <div class="col-lg-6">
                <ul class="list-group">
                    <li class="list-group-item"><strong>Req. NO.</strong> : {{u.dSelectDomain}}</li>
                    <li class="list-group-item"><strong>dDomainName</strong> : {{u.dDomainName}}</li>
                    <li class="list-group-item"><strong>dRegisterDomainFrom</strong> : {{u.dRegisterDomainFrom}}</li>
                </ul>
            </div>
            <div class="col-lg-6">
                <ul class="list-group">
                    <li class="list-group-item"><strong>dStartDate</strong> : {{u.dStartDate}}</li>
                    <li class="list-group-item"><strong>dEndDate</strong> : {{u.dEndDate}}</li>
                    <li class="list-group-item"><strong>dRegistrationFor</strong> : {{u.dRegistrationFor}}</li>

                </ul>
            </div>
        </div>

It's showing an error in the console. Please see in the below image

Answer 1

You did echo json data twice, so your response data is invalid json.

<?php
include("../include/connection_string.php");

$id = $_GET['id'];

$result = [];

$sql = mysqli_query($db, "SELECT * FROM dhms_requirement where id='".$id."'");
if(mysqli_num_rows($sql)){ 
    $data = array();
    while($row = mysqli_fetch_array($sql)){
        $data[] = array(
                'id' => $row['id'],
            'rClientName' => $row['rClientName'],
            'rContactNumber' => $row['rContactNumber'],
            'rCompanyName' => $row['rCompanyName'],
            'rEmail' => $row['rEmail'],
            'rRequirement' => $row['rRequirement'],
        );
    }

    //header('Content-type: application/json');
    //echo json_encode($data);

    //Instead of echo data here, just put it into $result array
    $result['requirement_detail'] = $data;
}

$sqlDomain = mysqli_query($db, "SELECT * FROM dhms_domain_details where id='".$id."'");
if(mysqli_num_rows($sqlDomain)){
    $dataDomain = array();
    while($rowDomain = mysqli_fetch_array($sqlDomain)){
        $dataDomain[] = array(
                'id' => $rowDomain['id'],
            'dSelectDomain' => $rowDomain['dSelectDomain'],
            'dDomainName' => $rowDomain['dDomainName'],
            'dRegisterDomainFrom' => $rowDomain['dRegisterDomainFrom'],
            'dStartDate' => $rowDomain['dStartDate'],
            'dEndDate' => $rowDomain['dEndDate'],
            'dRegistrationFor' => $rowDomain['dRegistrationFor'],
        );
    }

    //header('Content-type: application/json');
    //echo json_encode($dataDomain);

    //Put this $dataDomain into $result array also.
    $result['domain_data'] = $dataDomain;
}


//Echo json data finally.
header('Content-type: application/json');
echo json_encode($result);

?>

And update your html part

<!--<div class="panel-body" ng-repeat="u in details track by $index">-->
<!-- Careful the details.requirement_detail -->
<div class="panel-body" ng-repeat="u in details.requirement_detail track by $index">
                    <div class="col-lg-6">
                        <ul class="list-group">
                            <li class="list-group-item"><strong>Req. NO.</strong> : {{u.id}}</li>
                            <li class="list-group-item"><strong>Contact Number</strong> : {{u.rContactNumber}}</li>
                            <li class="list-group-item"><strong>Email Address</strong> : {{u.rEmail}}</li>
                        </ul>
                    </div>
                    <div class="col-lg-6">
                        <ul class="list-group">
                            <li class="list-group-item"><strong>Client Name</strong> : {{u.rClientName}}</li>
                            <li class="list-group-item"><strong>Compnay Name</strong> : {{u.rCompanyName}}</li>
                            <li class="list-group-item"><strong>Requirement</strong> : {{u.rRequirement}}</li>

                        </ul>
                    </div>
                </div>
<!--<div class="panel-body" ng-repeat="u in details track by $index">-->
<!-- Careful the details.domain_data-->
<div class="panel-body" ng-repeat="u in details.domain_data track by $index">
            <div class="col-lg-6">
                <ul class="list-group">
                    <li class="list-group-item"><strong>Req. NO.</strong> : {{u.dSelectDomain}}</li>
                    <li class="list-group-item"><strong>dDomainName</strong> : {{u.dDomainName}}</li>
                    <li class="list-group-item"><strong>dRegisterDomainFrom</strong> : {{u.dRegisterDomainFrom}}</li>
                </ul>
            </div>
            <div class="col-lg-6">
                <ul class="list-group">
                    <li class="list-group-item"><strong>dStartDate</strong> : {{u.dStartDate}}</li>
                    <li class="list-group-item"><strong>dEndDate</strong> : {{u.dEndDate}}</li>
                    <li class="list-group-item"><strong>dRegistrationFor</strong> : {{u.dRegistrationFor}}</li>

                </ul>
            </div>
        </div>

Why should do like this?

1. When you post your question:

   echo json_encode($data); after SELECT * FROM dhms_requirement ,

   and then, again,

   echo json_encode($dataDomain); after SELECT * FROM dhms_domain_details ,

   so your response data should like this:

   [...][...]

   It's invalid json data, as you saw the error in the console.

2. After updating php, I wrapped two select result into $result array, so your response data like this:

   {"requirement_detail":[...],"domain_data":[...]}

3. When loop in html template, your reference to detail, which is responsive data, divided into 2 parts, use detail.requirement_detail as first part, and domain_data as second part.

Should works.