PHP使用json_encode输出JSON给JavaScript，调用obj.id返回undefined如何解决

• XMLHttpRequest的responseText属性返回的是原始字符串类型的JSON数据，并非可直接读取属性的JavaScript对象，直接对字符串类型的值访问.id属性，自然不存在对应属性，返回undefined。
• 即使完成JSON字符串到JS对象的解析，接口返回的根结构是数组，数组本身没有id属性，id是数组内每一个商品对象的属性，需要指定数组下标才能访问对应商品的id值。

首先需要将返回的JSON字符串解析为JavaScript对象，再根据业务需求访问数组中对应下标的商品对象的id属性，修改后的代码如下：

function showHint() {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
        // 将JSON字符串解析为JS对象
        const productList = JSON.parse(this.responseText);
        // 示例：读取第一个商品的id属性，如果需要遍历所有商品可使用循环
        document.getElementById("txtHint").innerHTML = productList[0].id;

        // 若需要展示所有商品id可使用如下写法
        // const allIds = productList.map(item => item.id).join('、');
        // document.getElementById("txtHint").innerHTML = allIds;
    }
  xmlhttp.open("GET", "Download.php");
  xmlhttp.send();
}

可选优化：可以在PHP接口输出JSON前添加响应头，明确返回数据类型为JSON，避免部分环境下的解析异常：

<?php
    include "Connection.php";
    // 声明响应内容为JSON格式
    header('Content-Type: application/json');
    $syntax_query = "select * from product";
    $thisExecuter = mysqli_query($conn, $syntax_query);
    $result = array();
    while($row = mysqli_fetch_assoc($thisExecuter)){
        array_push(
            $result,
            array(
                "id"       => $row["product_id"],
                "name"        => $row["product_name"]
            )
        );
    }
    echo json_encode($result);
?>

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