根據收到的輸入從JSON獲取數據

Question

我需要根據收到的輸入獲取數據。

例如，如果輸入為'Royal python'，我應該獲取Royal python的詳細信息，但是使用以下代碼，我會收到錯誤消息：'您要的文件不存在'。 但是我把值輸入了fname。 但是不確定從數組中獲取數據的功能是否正確，我還想知道是否有更短的方法來做到這一點。 請幫忙？

我為此使用JavaScript，下面是我的代碼和網頁外觀：

<!DOCTYPE html> 
<html> 
<body>  

<form> <input type="text" name="fname" required> 
<button onclick="myFunction()">OK</button> `enter code here`
</form>  
<p id="demo"></p>  
<script> var text = '{"animals":[' + 
'{"Common Name":"Royal Python","Order":"Squamata","Family":"Boidae","Genus":"Python","Species":"regius","Zoo":"Blackpool Zoo","Number":4 },' + 
'{"Common Name":"Emperor Penguin","Order":"Sphenisciformes","Family":"Spheniscidae","Genus":"Aptenodytes","Species":"forsteri",`   "Zoo":"Welsh Mountain Zoo","Number":35 },' +` 
'{"Common Name":"Chimpanzee","Order":"Primates","Family":"Pongidae","Genus":"Pan","Species":"troglodytes",    "Zoo":"Blackpool Zoo","Number":8 }]}';  

obj = JSON.parse(text);  


//function to fetch data based on input

function myFunction(fname) 
{ var ani = ""; 
if (document.getElementByname("fname")="Royal Python")   
var ani =  document.getElementById("demo").innerHTML = obj.animals[0].Zoo + " " + obj.animals[0].Species; }}  </body> </html>

Answer 1

您的代碼中存在許多問題：

document.getElementByname("fname")="Royal Python"應該為document.getElementsByName("fname")[0].value == "Royal Python"

另外，編寫文本字符串然后將其解析為JSON也很麻煩。 只需使用一個JavaScript對象。

當您試圖確定動物時，也會使自己變得困難。 如果您的瀏覽器支持，請使用Array.findIndex() 。

這是一個工作示例：

 var obj = {animals:[{CommonName:"Royal Python",Order:"Squamata",Family:"Boidae",Genus:"Python",Species:"regius",Zoo:"Blackpool Zoo",Number:4 }, {CommonName:"Emperor Penguin",Order:"Sphenisciformes",Family:"Spheniscidae",Genus:"Aptenodytes",Species:"forsteri",Zoo:"Welsh Mountain Zoo",Number:35 }, {CommonName:"Chimpanzee",Order:"Primates",Family:"Pongidae",Genus:"Pan",Species:"troglodytes", Zoo:"Blackpool Zoo",Number:8 }]}; //function to fetch data based on input function myFunction() { var name = document.getElementsByName("fname")[0].value; var index = obj.animals.findIndex(function(item) { return item.CommonName === name; }); if (index >= 0) { document.getElementById("demo").innerHTML = obj.animals[index].Zoo + " " + obj.animals[index].Species; } }

 <input type="text" name="fname" required value="Royal Python"> <button onclick="myFunction()">OK</button> <p id="demo"></p>

Answer 2

這是使用for循環檢查動物數組的每個索引是否匹配的問題的解決方案。 此匹配也將不區分大小寫。

 <!DOCTYPE html> <html> <body> <p id="demo"></p> <input type="text" name="fname" required> <button onclick="fetchAnimal()">OK</button> `enter code here` <script> var animalsArr = [{ "commonName": "Royal Python", "order": "Squamata", "family": "Boidae", "genus": "Python", "species": "regius", "zoo": "Blackpool Zoo", "number": 4 }, { "commonName": "Emperor Penguin", "order": "Sphenisciformes", "family": "Spheniscidae", "genus": "Aptenodytes", "species": "forsteri", "zoo": "Welsh Mountain Zoo", "number": 35 }, { "commonName": "Chimpanzee", "order": "Primates", "family": "Pongidae", "genus": "Pan", "species": "troglodytes", "zoo": "Blackpool Zoo", "number": 8 }] function fetchAnimal() { var i; var len = animalsArr.length; // convert input name to lower-case var name = document.getElementsByName('fname')[0].value.toLowerCase(); for (i = 0; i < len; i++) { // check to see if lower-case input is the same as lower-case animal name (this ensures the match is case-insensitive) if (animalsArr[i].commonName.toLowerCase() === name) { document.getElementById('demo').innerHTML = animalsArr[i].zoo + ' ' + animalsArr[i].species; } } } </script> </body> </html>

注意：如果要在頁面上增加交互性，強烈建議將JS代碼移動到外部腳本文件中。

根據收到的輸入從JSON獲取數據

問題描述

2 個解決方案

解決方案1
0 2016-03-25 21:54:23

解決方案2
0 2016-03-25 23:02:16

根據收到的輸入從JSON獲取數據

問題描述

2 個解決方案

解決方案1 0 2016-03-25 21:54:23

解決方案2 0 2016-03-25 23:02:16

解決方案1
0 2016-03-25 21:54:23

解決方案2
0 2016-03-25 23:02:16