How to import local json file data to my JavaScript variable?

When working with local JSON files in JavaScript, you need to import the data into your JavaScript variables. This article demonstrates how to load JSON data from a local file using different methods depending on your environment.

Let's say we have an employees.json file in our project directory:

Sample JSON File

employees.json

{
  "Employees": [
    {
      "userId": "ravjy",
      "jobTitleName": "Developer", 
      "firstName": "Ran",
      "lastName": "Vijay",
      "preferredFullName": "Ran Vijay",
      "employeeCode": "H9",
      "region": "DL",
      "phoneNumber": "34567689",
      "emailAddress": "ranvijay.k.ran@gmail.com"
    },
    {
      "userId": "mrvjy",
      "jobTitleName": "Developer",
      "firstName": "Murli",
      "lastName": "Vijay",
      "preferredFullName": "Murli Vijay",
      "employeeCode": "A2",
      "region": "MU",
      "phoneNumber": "6543565",
      "emailAddress": "murli@vijay.com"
    }
  ]
}

Method 1: Using require() Module (Node.js)

In Node.js environment, you can directly import JSON files using the require() function:

const data = require('./employees.json');
console.log(data);
console.log('First employee:', data.Employees[0].firstName);

{
  Employees: [
    {
      userId: 'ravjy',
      jobTitleName: 'Developer',
      firstName: 'Ran',
      lastName: 'Vijay',
      preferredFullName: 'Ran Vijay',
      employeeCode: 'H9',
      region: 'DL',
      phoneNumber: '34567689',
      emailAddress: 'ranvijay.k.ran@gmail.com'
    },
    {
      userId: 'mrvjy',
      jobTitleName: 'Developer',
      firstName: 'Murli',
      lastName: 'Vijay',
      preferredFullName: 'Murli Vijay',
      employeeCode: 'A2',
      region: 'MU',
      phoneNumber: '6543565',
      emailAddress: 'murli@vijay.com'
    }
  ]
}
First employee: Ran

Method 2: Using fetch() API (Browser)

In the browser environment, use the fetch() API to load JSON files asynchronously:

fetch('./employees.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    console.log('Total employees:', data.Employees.length);
  })
  .catch(error => console.error('Error loading JSON:', error));

Method 3: Using ES6 Import (Modern JavaScript)

With modern JavaScript modules, you can use dynamic imports:

import('./employees.json')
  .then(module => {
    const data = module.default;
    console.log(data);
  });

// Or with async/await
async function loadData() {
  const module = await import('./employees.json');
  const data = module.default;
  return data;
}

Environment Compatibility

Key Points

• require() works only in Node.js and loads JSON synchronously
• fetch() requires a web server environment and returns a Promise
• Dynamic imports work in both environments with modern JavaScript support
• Always handle errors when loading external files

Conclusion

Choose require() for Node.js applications and fetch() for browser-based projects. Dynamic imports provide a modern, cross-platform solution for loading JSON data into JavaScript variables.