Let's Start It.

Steps:

  1. Folder Structure
  2. JSON File Structure
  3. Read data.JSON File Inside Root
  4. Read Blog.json File Inside src Folder

Demo:

Play Online On codesandbox and Download Code

If You Read JSON File, txt File, and Any Other File Inside JavaScript, use Fetch Method. Make Sure You use Live Server In JavaScript.

Live Server Provide You A HTTP Response  For Your Local Production and Development  base Project You Use Express.js, Vs code Live Server Plugin For Local Production ,and Any other Library.

Secondly, Don't Import JavaScript File. When Use Fetch Method In Your Project.

import data from "./Blog.json";
// show Error Inside Your Browser
 fetch(data).then(function(response) {
   response.json().then(function(data) {
     console.log(data)
   });
 });
SyntaxError: Unexpected token < in JSON at position 0

Resolve SyntaxError: Unexpected token < in JSON at position 0 Error: Simple Remove Import Value Inside Fetch Method and Add URL inside fetch.

Show A Error Inside Console:

SyntaxError: Unexpected token < in JSON at position 0
SyntaxError: Unexpected token < in JSON at position 0


Folder Structure

Folder Structure
Folder Structure

I'm Read Two File In My Demo Project. First File Inside Root Folder And Second File Inside src Folder.


JSON File Structure:

Json File Structure
JSON File Structure

JSON File Structure Most Important For Us, Because when JSON Data Warp Inside Array. In case You Use Map() Method And Get Data Easily Inside Your Project.

 [
     {
        "username": "officialrajdeepsingh",
        "firstName": "Rajdeep",
        "lastName": "Singh",
        "gender": "Male",
        "aboutAuthor": "Read Book, Music Lover and Web Developer"
      },
      ...
  ]
Json Data Inside Array Warper


You Write Directly Inside JSON File You Use Object.entries() Method Firstly, after use map() method For Read JSON File. Rest Of Code Same In My Demo Project.
JSON data Access Not Easily In Object.entries() Method. I'm Recommend You To Wrap Your JSON Data Firstly Inside Array.

 {
    "username": "officialrajdeepsingh",
    "firstName": "Rajdeep",
    "lastName": "Singh",
    "gender": "Male",
    "aboutAuthor": "Read Book, Music Lover and Web Developer"
  }
Json Data without Array use Object.enteries() method

Read data.json File Inside Root:

fetch("./data.json")
  .then(function (response) {
    return response;
  })
  .then(function (data) {
    return data.json();
  })
  .then(function (Normal) {
    const html = Normal.map(
      (data) => `<div class="card"> 
        <h4> ${data.username}</h4>
        <h2> ${data.firstName}  ${data.lastName}</</h2>
        <h3> ${data.gender}</h3>
        <h3> ${data.aboutAuthor}</h3>
    </div>`
    );
    document.getElementById("app").innerHTML = html;
  })
  .catch(function (err) {
    console.log("Fetch problem show: " + err.message);
  });
Root Folder File
  • Inside Fetch Method, We Pass Absolute File Path. In My Case My File Inside Root Folder. so we use the Absolute path to look like "./data.json". then use json() method Get data to the Response.
  • Do Not use Import File, Inside Fetch Method URL.
  • Make Sure Your JSON File Access With URL (Checkout My Example URL).
  • When Add File Path With Live Server. Now Fetch Method Convert To a URL. If fetch Method Not Convert Then Show Error In Your Console.
  • In local Development use Live Server For Convert  Fetch method url to Http response

Code sandbox Online Project My data.json File:
https://dnly0.csb.app/data.json


Read Blog.json File Inside src Folder:

fetch("./src/Blog.json")
  .then(function (response) {
    return response;
  })
  .then(function (data) {
    return data.json();
  })
  .then(function (Normal) {
    const html = Normal.map(
      (data) => `<div class="card"> 
        <h4> ${data.username}</h4>
        <h2> ${data.fullName}</</h2>
        <h3> ${data.aboutAuthor}</h3>
    </div>`
    );
    document.getElementById("appData").innerHTML = html;
  })
  .catch(function (err) {
    console.log("Fetch problem show: " + err.message);
  });
Inside src Blog.json File 
  • Inside Fetch Method, We Pass Absolute File Path. In My Case My File Inside src Folder. so we use the Absolute path to look like "./src/Blog.json". then use json() method Get data to the Response.
  • Do Not use Import File, Inside Fetch Method URL.
  • Make Sure Your JSON File Access With URL (Checkout My Example URL).
  • When Add File Path With Live Server. Now Fetch Method Convert To a URL. If fetch Method Not Convert Then Show Error In Your Console.
  • In local Development use Live Server For Convert  Fetch  method url to Http response

Code sandbox Online Project Example My Blog.json
https://dnly0.csb.app/src/Blog.json


Reference:

Fetch API
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
official Docs By mdn
JavaScript | fetch() Method - GeeksforGeeks
A computer science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
Post By geeksforgeeks Team

Read More:

Read Locally txt File Use Fetch Method In JavaScript By Rajdeep Singh
Hey Everybody, My Name Is Rajdeep Singh. Welcome To My New Blog Post. As You Knows We Learn, How to Read Locally txt File Use Fetch Method In Javascript.
Read Locally Txt File Inside js

Contact me