JS读取MySQL数据后如何还原为与原结构一致的多维数组

解决方案 #

第一步：调整写入数据库的格式 #

你用TEXT类型存储数组，写入前必须先将JS数组序列化为JSON字符串，否则读取到的只是普通字符串，无法直接作为数组使用。写入时的单条数据处理示例：

// 取originalArray中的单条数据做写入预处理
const item = originalArray[0];
const submitData = {
  tstName: item[0],
  tstArr1: JSON.stringify(item[1]), // 子数组序列化为字符串
  tstArr2: JSON.stringify(item[2])
};
// 后续将submitData传给后端写入MySQL即可

第二步：修正读取组装逻辑 #

你当前的push操作是把三个字段作为独立元素推入数组，最终得到的是一维数组，和原结构不符。需要把每条数据的三个字段拼成一个子数组后再整体推入newArray，同时要把读取到的JSON字符串反序列化为数组：

function readEvent() {
    var newArray = []; // 确保newArray初始为空，建议放在作用域内避免全局污染
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'DB_read.php', true);
    xhr.onload = function () {
        if (this.status == 200) {
            var DB_response = JSON.parse(this.responseText);
            // 用普通for循环遍历数组比for in更稳妥，避免遍历到非索引属性
            for (let i = 0; i < DB_response.length; i++) {
                const row = DB_response[i];
                // 反序列化得到数组结构
                const tstArr1_from_db = JSON.parse(row.tstArr1);
                const tstArr2_from_db = JSON.parse(row.tstArr2);
                // 拼成子数组后再推入
                newArray.push([row.tstName, tstArr1_from_db, tstArr2_from_db]);
            }
            console.table(originalArray);
            console.log(originalArray[1][1][1]);
            console.table(newArray);
            console.log(newArray[1][1][1]); // 此时输出和原数组一致，为Beethoven
        }
    }
    xhr.send();
}

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