Error while fetching data from Json File in Javascript

I have a json file and I wanted to display data from that file to HTML. I have written code but while coding it is giving error as 'Type Error: Failed To Fetch'

Here is the code of various files

JSON File

[
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]

fetch('DisplayData.json')
.then(function (response) {
alert('Inside Fetch');
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
alert('Error Occured' + err);
});
function appendData(data) {
alert('Inside function');
var m = document.getElementById("mDiv");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName;
m.appendChild(div);
}
}

"DisplayData.js">
"mDiv">

`enter code here`

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Abhijeet Jadhav6y ago
Hi Bhawna,
I tried below code in my local machine and it is executed as expected.
You need to keep the json file in the same directory as the html file.
"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    JSON Test


    "myData">