WordPress插件开发：如何将JSON接口数据转为表格展示？

嘿，作为WordPress插件开发新手，能写出获取JSON的函数已经迈出不错的一步啦！咱们来一步步搞定把JSON数据转成表格展示的需求～

首先得先修正你原函数里的小问题：你现在的$em是空字符串，导致$url也是空的，这样肯定获取不到有效数据。先把实际的API URL赋值给$url（比如$url = 'https://your-api-url.com/get-data';），这样才能拿到正确的JSON。

接下来，我们需要把获取到的JSON字符串解析成PHP数组，然后根据数据结构生成HTML表格。你的JSON结构有多层嵌套（Bookings → Detail → RoDetail → Passengers），所以我们要逐层遍历这些数据。

完整示例函数 #

function user_det() {
    // 替换成你的实际API URL
    $url = 'https://your-api-url.com/get-data';
    
    // 发起请求并获取响应
    $response = wp_remote_get($url, array('timeout' => 120));
    
    // 检查请求是否成功
    if (is_wp_error($response)) {
        echo '<p>获取数据失败：' . $response->get_error_message() . '</p>';
        return;
    }
    
    // 获取响应体并解析成关联数组
    $json_body = wp_remote_retrieve_body($response);
    $data = json_decode($json_body, true);
    
    // 检查JSON解析是否成功，且存在Bookings数据
    if (!is_array($data) || empty($data['Bookings'])) {
        echo '<p>没有可用的预订数据</p>';
        return;
    }
    
    // 开始构建表格HTML（加了简单样式让表格更美观）
    $table_html = '<style>
        .booking-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        .booking-table th, .booking-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        .booking-table th { background-color: #f5f5f5; }
        .passenger-info { margin-top: 5px; }
    </style>';
    
    $table_html .= '<table class="booking-table">';
    $table_html .= '<thead><tr>
        <th>服务类型</th>
        <th>酒店名称</th>
        <th>房间类型</th>
        <th>房间数量</th>
        <th>乘客信息</th>
        <th>成人总数</th>
        <th>儿童总数</th>
    </tr></thead><tbody>';
    
    // 遍历每个预订记录
    foreach ($data['Bookings'] as $booking) {
        $detail = $booking['Detail'];
        $ro_details = $detail['RoDetail'];
        
        // 遍历每个房间详情
        foreach ($ro_details as $ro_detail) {
            // 处理乘客信息，把每个乘客的信息整理成易读的格式
            $passengers_str = '';
            foreach ($ro_detail['Passengers'] as $index => $passenger) {
                $passenger_info = [];
                if (!empty($passenger['Salutations'])) $passenger_info[] = '称谓：' . $passenger['Salutations'];
                if (!empty($passenger['FirstName'])) $passenger_info[] = '名字：' . $passenger['FirstName'];
                if (!empty($passenger['LastName'])) $passenger_info[] = '姓氏：' . $passenger['LastName'];
                if (!empty($passenger['Age'])) $passenger_info[] = '年龄：' . $passenger['Age'];
                if (!empty($passenger['CotBedOption'])) $passenger_info[] = '婴儿床：' . $passenger['CotBedOption'];
                
                $passengers_str .= '<div class="passenger-info">乘客' . ($index + 1) . '：' . implode(' | ', $passenger_info) . '</div>';
            }
            
            // 填充表格行，用esc_html防止XSS攻击
            $table_html .= '<tr>
                <td>' . esc_html($detail['ServiceType']) . '</td>
                <td>' . esc_html($detail['HoName']) . '</td>
                <td>' . esc_html(implode(', ', $ro_detail['RoomTypeDescription'])) . '</td>
                <td>' . esc_html($ro_detail['NumberOfRooms']) . '</td>
                <td>' . $passengers_str . '</td>
                <td>' . esc_html($ro_detail['totalAdult']) . '</td>
                <td>' . esc_html($ro_detail['totalChild']) . '</td>
            </tr>';
        }
    }
    
    $table_html .= '</tbody></table>';
    
    // 输出表格
    echo $table_html;
}

关键步骤解释 #

1. 请求与错误处理：加入了is_wp_error检查，避免请求失败时出现白屏；同时检查JSON解析结果和数据是否存在，提升代码健壮性。
2. JSON解析：用json_decode($json_body, true)把JSON字符串转成PHP关联数组，方便我们直接通过键名获取数据。
3. 表格构建：
   • 加了简单的内联样式，你也可以换成和主题匹配的样式类。
   • 逐层遍历嵌套的数据，把Bookings、RoDetail、Passengers的内容对应到表格列中。
   • 用esc_html()处理输出内容，这是WordPress开发中防止XSS攻击的必备操作。
4. 空值处理：对于可能为空的字段，只在有值时才展示，避免表格里出现大量空内容。

使用方法 #

你可以直接替换原来的user_det()函数，然后在需要展示表格的地方调用它（比如模板文件里）。如果想在文章/页面里调用，还可以把它改成短代码：

add_shortcode('booking_table', 'user_det');

之后在编辑器里输入[booking_table]就能看到生成的表格啦～

内容的提问来源于stack exchange，提问作者radix