我正在尝试根据 url 中的值过滤 json 数组并获取属性vernacularName。在 F12 调试中，我可以输入record[0].vernacularName;它，它给了我正确的变量，但下面的代码仍然失败。document.getElementById("demo").innerHTML = datasetID;有效但document.getElementById("demo").innerHTML = vernacularName;无效。最终我想添加 vernauralName 作为会话变量<body> <div class=""> <h3>testing data</h3> <p id="demo" class = 'pl-5'></p> </div><script type="text/javascript"> const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const species = urlParams.get('species') const bone = urlParams.get('bone') const datasetID = urlParams.get('datasetID') var data; $.getJSON("json/data.json", function(json){ data = json; }); record = data.filter(r => r.datasetID == datasetID); var vernacularName = record[0].vernacularName; // const vernacularName2 = record.vernacularName; $_SESSION["v"] = vernacularName;</script><script>document.getElementById("demo").innerHTML = vernacularName;</script>
1 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
首先，我不确定为什么
document.getElementById("demo").innerHTML = vernacularName;
位于其自己的script标签内。这看起来很奇怪。
无论如何，这里的问题是数据还没有准备好。在数据返回给您之前，您无法开始处理数据并使用它来更新页面上的元素。
这就是第二个参数的全部要点- 它是在获取数据后getJSON成功调用的函数。
因此，其余代码应该全部放在该函数内：
$.getJSON("json/data.json", function(json) {
const data = json;
const record = data.filter(r => r.datasetID === datasetID);
const vernacularName = record[0].vernacularName;
$_SESSION["v"] = vernacularName;
document.getElementById("demo").innerHTML = vernacularName;
});
旁注：var既然您似乎正在使用 ES6+，那么除非您有充分的理由，否则您不应该使用。let代替使用。
添加回答
举报
0/150
提交
取消