localStorage调用JSON.parse返回字符串 循环逐字符遍历无法匹配key

问题根因 #

1. localStorage存储逻辑错误 #

存储环节存在双层序列化问题：

• 已通过JSON.parse(this.responseText)把后端返回的JSON字符串解析为了JS对象/对象数组，存到了jsonResponse变量
• 调用localStorage.setItem时，又对**原始字符串类型的this.responseText**做了一次JSON.stringify，等于把普通字符串再次序列化为了带转义的字符串
• 后续读取时即使执行JSON.parse，得到的还是原始字符串格式的后端响应，不是可遍历的对象数组，因此遍历的时候会按字符串逐字符拆分

2. 动态属性取值逻辑错误 #

getListFromJson函数中，jsonResp[index].type的取值方式是读取名称为type的固定属性，不会识别传入的type变量，无法动态匹配diesel/e5/e10等传入的key。

修复方案 #

第一步：修正存储逻辑 #

把页面1的存储代码替换为：

xhttp.onload = function() {
        var jsonResponse = JSON.parse(this.responseText);
        // 改为序列化已经解析好的对象，不要序列化原始响应字符串
        localStorage.setItem("Json", JSON.stringify(jsonResponse));

        showDataInTable(jsonResponse);

        var label = document.getElementById("labelOfMaxPages");
        label.innerText = "von " + maxPages;
    }

第二步：修正动态属性取值逻辑 #

把getListFromJson函数修改为：

function getListFromJson(type, jsonResp) {
    var typeList = [];
    for (index = 0; index <= jsonResp.length - 1; index++) {
        // 用方括号语法读取动态变量对应的属性
        typeList.push(jsonResp[index][type]);
    }
    return typeList;
}

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