javascript根据url参数从数组中获取属性_Javascript_Json

javascript根据url参数从数组中获取属性

javascript json

javascript根据url参数从数组中获取属性,javascript,json,Javascript,Json,我试图根据url中的值过滤json数组，并获取localname属性。在F12调试中，我可以放入记录[0]。白话名并给出了正确的变量，但下面的代码仍然失败 document.getElementById（“demo”）.innerHTML=datasetID可以工作，但document.getElementById（“demo”）.innerHTML=本地名称没有最后，我想添加本地名称作为会话变量 <body> <div class="">

我试图根据url中的值过滤json数组，并获取

localname

属性。在F12调试中，我可以放入

记录[0]。白话名并给出了正确的变量，但下面的代码仍然失败
document.getElementById（“demo”）.innerHTML=datasetID可以工作，但document.getElementById（“demo”）.innerHTML=本地名称没有
最后，我想添加本地名称作为会话变量
<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>


测试数据

const queryString=window.location.search；
const urlParams=新的URLSearchParams（queryString）；
const species=urlParams.get（'species'）
const-bone=urlParams.get（'bone'）
const datasetID=urlParams.get（'datasetID'）
var数据；
$.getJSON（“json/data.json”，函数（json）{
data=json；
});
record=data.filter（r=>r.datasetID==datasetID）；
var localarName=记录[0]。localarName；
//const-localarname2=record.localarname；
$_SESSION[“v”]=本地名称；
document.getElementById（“demo”）.innerHTML=本地名称；
首先，我不知道为什么
document.getElementById("demo").innerHTML = vernacularName;

在其自己的脚本标记中。这似乎很奇怪
无论如何，这里的问题是数据还没有准备好。在数据返回给您之前，您无法开始处理数据并使用它更新页面上的元素
这就是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;
  });

旁注：既然您似乎在使用ES6+，那么您就不应该使用var
，除非您有充分的理由这样做。使用let
。有关于它的信息和在后。但是，在这种情况下，代码中的所有内容都是常量，因此请坚持使用const