如何从 API 响应生成动态 Ul li（列表项）？

Question

我正在运行 API 调用并得到以下响应：

{
"recsonpage":"4",
    "4":{
        "orders.orderid":"8890348189",
        "entity.customerid":"15250457",
        "entity.entityid":"88908189",
        "orders.autorenew":"false",
        "orders.endtime":"1604899485",
        "orders.resellerlock":"false",
        "orders.timestamp":"2019-11-09 05:24:46.25876+00",
        "orders.customerlock":"true",
        "entity.entitytypeid":"3",
        "entity.currentstatus":"Active",
        "entitytype.entitytypekey":"domcno",
        "orders.transferlock":"true",
        "orders.creationtime":"1573277085",
        "orders.privacyprotection":"false",
        "entitytype.entitytypename":".COM Domain Name",
        "orders.creationdt":"1573277084",
        "entity.description":"domain1.com"
        },
    "3":{
        "orders.orderid":"8739268259",
        "entity.customerid":"15250457",
        "entity.entityid":"87398259",
        "orders.autorenew":"false",
        "orders.endtime":"1625211562",
        "orders.resellerlock":"false",
        "orders.timestamp":"2020-05-23 05:53:15.586565+00",
        "orders.customerlock":"true",
        "entity.entitytypeid":"3",
        "entity.currentstatus":"Active",
        "entitytype.entitytypekey":"domcno",
        "orders.transferlock":"true",
        "orders.creationtime":"1372750762",
        "orders.privacyprotection":"false",
        "entitytype.entitytypename":".COM Domain Name",
        "orders.creationdt":"1561992837",
        "entity.description":"domain2.com"
        },
    "2":{
        "orders.orderid":"8739768158",
        "entity.customerid":"15250457",
        "entity.entityid":"87398158",
        "orders.autorenew":"false",
        "orders.endtime":"1625300828",
        "orders.resellerlock":"false",
        "orders.timestamp":"2020-05-23 05:54:20.869807+00",
        "orders.customerlock":"true",
        "entity.entitytypeid":"17",
        "entity.currentstatus":"Active",
        "entitytype.entitytypekey":"dotin",
        "orders.transferlock":"true",
        "orders.creationtime":"1372840028",
        "entitytype.entitytypename":".IN Domain Name",
        "orders.creationdt":"1561992195",
        "entity.description":"domain3.in"
        },
"recsindb":"4",
    "1":{
        "orders.orderid":"8701877407",
        "entity.customerid":"15250457",
        "entity.entityid":"87017407",
        "orders.autorenew":"false",
        "orders.endtime":"1622300992",
        "orders.resellerlock":"false",
        "orders.timestamp":"2020-05-23 05:55:45.916596+00",
        "orders.customerlock":"true",
        "entity.entitytypeid":"3",
        "entity.currentstatus":"Active",
        "entitytype.entitytypekey":"domcno",
        "orders.transferlock":"true",
        "orders.creationtime":"1369840192",
        "orders.privacyprotection":"false",
        "entitytype.entitytypename":".COM Domain Name",
        "orders.creationdt":"1558956495",
        "entity.description":"domain4.com"
        }
}

我的逻辑是：

<?php
    global $user_ID, $user_identity, $userdata; wp_get_current_user();
    $current_user = wp_get_current_user();
    $custemail= $current_user->user_email;

get_header();

$url = 'https://httpapi.com/api/customers/details.json?auth-userid=12345&api-key=mykey&username='.$custemail;
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$json = curl_exec($ch);
if(curl_error($ch)) { 
echo 'error:' . curl_error($ch);
};
curl_close($ch);
$data = json_decode($json,true);

$custid= $data['customerid'];
$url = 'https://httpapi.com/api/domains/search.json?auth-userid=12345&api-key=mykey&no-of-records=10&page-no=1&customer-id='.$custid;
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$json = curl_exec($ch);
if(curl_error($ch)) { 
echo 'error:' . curl_error($ch);
};
curl_close($ch);
$data = json_decode($json,true);

$i = -- $data['recsonpage'];

$t = $data['recsonpage'];

?>
<div>

<script>
        $(document).ready(function(){
            $("#dom-list").click(function(){
                $("#dom-list").append('<li><p class="tld-name-2"><?php echo "" .$data["$t"]['entity.description']; ?></a></p><p class="prop"><span class="prop-head">Created On :</span><span class="data-no"><?php echo "" .$data["$t"]['orders.creationtime']; ?></span></p>      <p class="prop"><span class="prop-head">Expires On :</span><span class="data-no"><?php echo "" .$data["$t"]['orders.endtime']; ?></span></p><p class="prop"><span class="prop-head">Privacy Protection :</span><span class="data-no"><?php echo "" .$data["$t"]['orders.privacyprotection']; ?></span></p>      <p class="prop"><span class="prop-head">Theft Protection :</span><span class="data-no"><?php echo "" .$data["$t"]['orders.customerlock']; ?></span></p>     <p class="prop"><span class="prop-head">Status :</span><span class="data-no"><?php echo "" .$data["$t"]['entity.currentstatus']; ?></span></p></li>');

            });
              for (var counter = 0; counter < "<?php echo $i; ?>"; counter++) {
                  $("#dom-list").click();
              }

        });

</script>

<ul id="dom-list" class="domain-list-ul">

</ul>   

<button id="add-item" type="button" style="display:none">Add New LI Element</button>

</div>

按钮被点击 4 次（来自 API 的行数）以生成列表项。但问题是我无法在每个列表中获得不同的数据。我在每个列表项中都得到相同的数据。

请帮忙。

预期的 HTML 输出

enter image description here

Answer 1

您不需要为此目的添加隐藏按钮，也不需要 jQuery 代码。当页面加载时，您的 API 已经被调用并且结果已经存在，以便在页面加载 UI 之前呈现。所以我们需要遍历从 API 接收到的数据并渲染 UI。

试试下面的代码块：

<?php
global $user_ID, $user_identity, $userdata; wp_get_current_user();
$current_user = wp_get_current_user();
$custemail= $current_user->user_email;
get_header();
$url = 'https://httpapi.com/api/customers/details.json?auth-userid=12345&api-key=mykey&username='.$custemail;
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$json = curl_exec($ch);
if(curl_error($ch)) { 
    echo 'error:' . curl_error($ch);
};
curl_close($ch);
$data = json_decode($json,true);
$custid = $data['customerid'];
$url = 'https://httpapi.com/api/domains/search.json?auth-userid=12345&api-key=mykey&no-of-records=10&page-no=1&customer-id='.$custid;
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$json = curl_exec($ch);
if(curl_error($ch)) { 
    echo 'error:' . curl_error($ch);
};
curl_close($ch);
$data = json_decode($json,true);
ksort($data);
?>
<div>
    <ul id="dom-list" class="domain-list-ul">
        <?php foreach($data as $key => $value) { ?>
        <?php if(is_array($value)) { ?>
        <li>
            <p class="tld-name-2">
                <?php echo " {$value['entity.description']}"; ?>
            </p>
            <p class="prop">
                <span class="prop-head">Created On :</span>
                <span class="data-no"><?php echo " {$value['orders.creationtime']}"; ?></span>
            </p>
            <p class="prop">
                <span class="prop-head">Expires On :</span>
                <span class="data-no"><?php echo " {$value['orders.endtime']}"; ?></span>
            </p>
            <p class="prop">
                <span class="prop-head">Privacy Protection :</span>
                <span class="data-no"><?php echo " {$value['orders.privacyprotection']}"; ?></span>
            </p>
            <p class="prop">
                <span class="prop-head">Theft Protection :</span>
                <span class="data-no"><?php echo " {$value['orders.customerlock']}"; ?></span>
            </p>
            <p class="prop">
                <span class="prop-head">Status :</span>
                <span class="data-no"><?php echo " {$value['entity.currentstatus']}"; ?></span>
            </p>
        </li>
        <?php }  
} ?>
    </ul>
</div>