How do I read into JavaScript from JSON file?

Question

How do I read information from a JSON file into a JavaScript so that I can display that value into a HTML page?

In the if statement and the item.innerHTML line are both not picking up the data from the JSON file.

I have the animal's value reading in from the JSON file and then the if statement prints the information a HTML file

let animals = JSON.parse(animals);

for(let i = 0; i < animals.length; i++){
      if(animals.dogs[i].dogId === dog[i]) {
          item.innerHTML += "<li>" + animals.dogs[i].dogName + "</li>";
        }
}

The data in the JSON file looks like this:

{
    "animals": {
        "dogs": [
            {
                "dogId": "DW-001",
                "dogName": "Fido",
                "dogType": "Poodle",
                "dogType": "Small",
                "description": "Excellant lap dog, doesn't shed.",
                "pricePerHour": "3.0"
            }
     ]
    }
}

When working in web, you always need to be aware of where your code is executing. You're writing that Javascript from a server somewhere, but it is executing on a client computer somewhere in their browser. That computer doesn't have access to your server. If you want the JSON included, you'll have to add it to the Javascript on the server side. — Tim Roberts, Aug 23 '21 at 02:11
@Musafiroon it is, I haven't included the entire JavaScript file — , Aug 23 '21 at 03:19

score 0 · Answer 1 · answered Aug 23 '21 at 02:17

In your case the easiest solution would be to just add the JSON text into your JavaScript as a variable

let animalData = '''
{
    "animals": {
        "dogs": [
            {
                "dogId": "DW-001",
                "dogName": "Fido",
                "dogType": "Poodle",
                "dogType": "Small",
                "description": "Excellant lap dog, doesnt shed.",
                "pricePerHour": "3.0"
            }
     ]
    }
}
'''

I want to do that but the spec specifically says I cannot edit the JSON file — , Aug 23 '21 at 03:15

score 0 · Answer 2 · answered Aug 23 '21 at 03:22

if you have two files that are index.html and animals.json then

you could use the `fetch API to read the file

ie.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<body>
    <div id="item"></div>
    <script>
        var item = document.querySelector('#item');
        var animals;
        var dog = ["DW-001"]
        fetch("./animals.json")
            .then(x => x.text())
            .then(y => {
                animals = JSON.parse(y.replaceAll(/(\r|\n|\s)/g, "")).animals;
                console.log('hello')
                for (let i = 0; i < animals.dogs.length; i++) {
                    if (animals.dogs[i].dogId === dog[i]) {
                        item.innerHTML += "<li>" + animals.dogs[i].dogName + "</li>";
                    }
                }

            });
    </script>
</body>

</html>

animals.json -- no changes made from your original file

{
    "animals": {
        "dogs": [
            {
                "dogId": "DW-001",
                "dogName": "Fido",
                "dogType": "Poodle",
                "dogType": "Small",
                "description": "Excellantlapdog,doesntshed.",
                "pricePerHour": "3.0"
            }
        ]
    }
}

This worked for me

How do I read into JavaScript from JSON file?

2 Answers2

index.html

animals.json -- no changes made from your original file