Is there an alternative method to manipulate and showcase the data in a file without utilizing fetch? Moreover, is it possible to save the JSON file in a variable and iterate over its content? It appears that for a local file, there should be a more straightforward approach to working with and displaying the data...
<!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></title>
<link rel="stylesheet" href ="styles.css">
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src="main.js"></script>
<script src="animals.json"></script> <!-- added json file-->
</head>
<body>
<div class ="sampleDiv"></div>
</div>
</body>
</html>
json file
[
{
"name": "Whiskers",
"species" : "cat",
"foods": {
"likes": ["celery", "strawberries"],
"dislikes": ["carrots"]
}
},
{
"name": "Woof",
"species" : "dog",
"foods": {
"likes": ["dog food"],
"dislikes": ["cat food"]
}
},
{
"name": "Fluffy",
"species" : "cat",
"foods": {
"likes": ["canned food"],
"dislikes": ["dry food"]
}
}
]