PHP中如何用foreach循环生成JSON数组及返回数据异常排查

问题排查 #

1. PHP端语法&逻辑错误 #

• 数组元素分隔符错误：定义$result['data']数组时，元素之间错误使用了分号;，PHP数组元素必须用逗号,分隔，该问题会直接触发PHP致命错误，导致接口返回非JSON格式内容，前端解析失败。
• 数据覆盖问题：循环中每次直接给$result['data']赋值，会覆盖上一次循环的结果，最终$result['data']只会保留最后一个JSON文件的数据，需要用[]语法追加到数组中。
• 字段名拼写错误：把字段endtime拼写成了endime，会导致读取不到对应字段值，返回null。
• 缺少变量初始化：$objs没有提前初始化为空数组，如果data目录下没有JSON文件，后续遍历$objs会抛出警告，可能影响返回值格式。

2. 前端逻辑错误 #

response.data是数组类型，直接用$('tbody').html(response.data)赋值，会把数组转成[object Object]这类无意义的字符串，无法正常渲染表格，需要先遍历数组拼接成表格行的HTML字符串再赋值。

修正后的代码 #

process.php #

<?php
// 初始化变量
$objs = [];
$files = glob('data/*.json');
if (!empty($files)) {
    foreach($files as $file) {
        $content = file_get_contents($file);
        $json = json_decode($content, true);
        // 跳过解析失败的文件
        if (json_last_error() === JSON_ERROR_NONE && is_array($json)) {
            $objs[] = $json;
        }
    }
}
$result = [];
// 初始化data为数组
$result['data'] = [];
foreach($objs as $val) {
    // 追加数据、修正字段名、元素用逗号分隔
    $result['data'][] = [
        'id' => $val['id'],
        'date' => $val['date'],
        'day' => $val['day'],
        'starttime' => $val['starttime'],
        'endtime' => $val['endtime'],
        'hours' => $val['hours']
    ];
}
// 避免$_POST['name']不存在触发警告
$result['name'] = isset($_POST['name']) ? $_POST['name'] : '';
$result['status'] = 2;
// 指定返回类型，避免前端解析异常
header('Content-Type: application/json');
echo json_encode($result);

前端AJAX部分 #

$.ajax({
    type: "POST",
    url: "process.php",
    data: {
        name: name          
    },
    dataType: "json",
    success: function(response) {
        if(response.status == 2) {
            // 拼接表格HTML
            let html = '';
            response.data.forEach(item => {
                html += `<tr>
                    <td>${item.id}</td>
                    <td>${item.date}</td>
                    <td>${item.day}</td>
                    <td>${item.starttime}</td>
                    <td>${item.endtime}</td>
                    <td>${item.hours}</td>
                </tr>`;
            });
            $('tbody').html(html);
            $('.name').html(response.name);
        }
    },
    // 错误回调方便调试
    error: function(xhr, err) {
        console.log('请求出错', err, xhr.responseText);
    }
});

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