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

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

例如，如果輸入是'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>

來源

2016-03-25 sandy

那麼你的問題是什麼？ –

歡迎來到Stack Overflow！我編輯了你的問題。你給我們展示了一些代碼是很好的;這有助於我們更好地理解你面臨的問題。但是，事實並非如此清楚，問題在哪裏。我建議你[編輯]你的問題，告訴我們什麼在你的代碼中不起作用。祝你好運！ –

謝謝您的答覆。現在我編輯了這個問題以獲得更多理解。希望這有助於 – sandy

有一些在你的代碼問題：

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>

來源

2016-03-25 21:54:23 dave

這是你的問題的解決方案，它使用一個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代碼到外部腳本文件，如果你打算更多的交互添加到頁面。

來源

2016-03-25 23:02:16

謝謝大家。我認爲這會解決我的問題。 – sandy

@sandy如果此答案幫助了您，您應該接受它 – dave

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

回答

相關問題