如何从 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",        },该按钮被单击 4 次（来自 API 的行数）以生成列表项。但问题是我无法在每个列表中获取不同的数据。我在每个列表项中都得到相同的数据。请帮忙。

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>