受け取った入力に基づいてJSONからデータを取得

受け取った入力に基づいてデータを取得する必要があります。受け取った入力に基づいてJSONからデータを取得

たとえば、入力が「Royal python」の場合、Royal python.butの詳細を次のコードで取得する必要があります。「要求したファイルが存在しません」というエラーが表示されます。しかし、私はfnameに値を取得します。しかし、関数が配列からデータをフェッチするのが正しいかどうかはわかりません。また、これを行う方法があるかどうかを知りたいと思っていました。助けてください？私はこのためにJavaScriptを使用してい

、私のコードとWebページの外観は以下の通りです：あなたのコード内の問題の数が

<!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

あなたの質問は何ですか？ –

ようこそスタックオーバーフロー！私はあなたの質問を編集しました。あなたが私たちにいくつかのコードを見せてくれて良かったです。これはあなたが直面している問題をよりよく理解するのに役立ちます。しかし、それが問題なのは明らかではありません。私はあなたの質問を編集して、あなたのコード内でうまくいかないことを教えてください。がんばろう！ –

あなたの返事ありがとうございました。私はより多くの理解のための質問を編集しました。これが助けてくれるでしょう – 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からデータを取得

答えて

関連する問題