Retrieve information from a JSON file according to the provided input

Question

Retrieve information from a JSON file according to the provided input

Can someone help me fetch data based on user input in JavaScript?

When the input is 'Royal Python', I'm supposed to retrieve details about it. However, the code provided gives an error stating 'The file you asked for does not exist'. Even though the value goes into 'fname', I'm unsure if the function correctly retrieves data from the array. Is there a more concise way to achieve this? Any suggestions would be appreciated.

I've included my JavaScript code and webpage layout below:

<!DOCTYPE html> 
<html> 
<body>  

<form> <input type="text" name="fname" required> 
<button onclick="myFunction()">OK</button>
</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>

javascript json

Answer 1

Answer №1

One potential solution to your issue involves using a for loop to iterate through each index of the animal array in search of a match. This matching process is also designed to be case-insensitive.

<!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 matches any lower-case animal names (ignores case sensitivity)
            if (animalsArr[i].commonName.toLowerCase() === name) {
                document.getElementById('demo').innerHTML = animalsArr[i].zoo + ' ' + animalsArr[i].species;
            }
        }
    }
    </script>
</body>

</html>

Note: To enhance interactivity on the page, it's advisable to transfer the JS code into an external script file.

Answer 2

One potential solution to your issue involves using a for loop to iterate through each index of the animal array in search of a match. This matching process is also designed to be case-insensitive.

<!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 matches any lower-case animal names (ignores case sensitivity)
            if (animalsArr[i].commonName.toLowerCase() === name) {
                document.getElementById('demo').innerHTML = animalsArr[i].zoo + ' ' + animalsArr[i].species;
            }
        }
    }
    </script>
</body>

</html>

Note: To enhance interactivity on the page, it's advisable to transfer the JS code into an external script file.

Answer 3

Answer №2

It seems like there are a few issues that need to be addressed in the code:

document.getElementByname("fname")="Royal Python"

should actually be

document.getElementsByName("fname")[0].value == "Royal Python"

Instead of writing out text strings and then parsing them as JSON, consider using a JavaScript object for simplicity.

When trying to determine the animal, utilizing Array.findIndex() can be more efficient if supported by your browser.

Below is an example with the necessary corrections:

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 4

It seems like there are a few issues that need to be addressed in the code:

document.getElementByname("fname")="Royal Python"

should actually be

document.getElementsByName("fname")[0].value == "Royal Python"

Instead of writing out text strings and then parsing them as JSON, consider using a JavaScript object for simplicity.

When trying to determine the animal, utilizing Array.findIndex() can be more efficient if supported by your browser.

Below is an example with the necessary corrections:

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>

Retrieve information from a JSON file according to the provided input

Answer №1

Answer №2

Similar questions

HTMLElement addition assignment failing due to whitespace issues

Incorporating location markers onto a Google map using a JSON array

The controller method in Laravel is not being triggered by AJAX

Ingesting a PDF stream into a JSP document

"Encountered a Json error with a bizarre character causing the string

Data Binding in AngularJS appears to be non-functional

Converting multiple rows of data from MySQL into JSON format

How to fetch database results using jQuery AJAX and PHP's JSON encoding

Sharing a collection of data fields

"Looping through each item in a list using Angular

Deep Dive into TypeScript String Literal Types

JavaScript (specifically, using jQuery) in conjunction with AJAX

The backbone module is experiencing formatting issues

Mysterious data organization - transform into an object

Using JavaScript to auto-scroll a textarea to a certain position

A dynamic search feature implemented with PHP, MySQL, and AJAX

Tips for showcasing the information from a JSON document in React

Issue with ngModelChange and change events not functioning properly in Internet Explorer 11

Getting the content of a textarea within a v-for loop collection

A JavaScript function that yields no value is undefined