What is the process for accessing a local .json file from a remote machine or folder?

I am currently working on a project that involves a .json file stored in my local folder. Along with the file, I have Javascript code in the same directory to access and read the values from the .json file. To open the file, this is the line of code I use:

const data = require('../JS/countries.json');
.

Everything runs smoothly on my personal machine, and I have even shared the project on a github repository(https://github.com/TheRadioDept/technical-question). However, when attempting to clone this repository into another folder, I encountered an error:

code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/me/progs/clonedRepo/technical-question/main.js' ]


[ '/home/me/progs/clonedRepo/technical-question/main.js' ]
represents the path to the cloned repository, which is not the original location of the .json file and javascript code. This indicates that the code can only be run on my personal machine from the original folder where the JS and JSON files are stored. Is there a way to execute this code and access it from another folder or device?

javascriptnode-modules

Answer №1

main.js can be found at the root of your repository. The import

const data = require('../JS/countries.json');

relies on the folder name where your repository is located. Typically, the folder and repository have similar names, causing users to clone your repository into a folder named technical-question which results in import errors.

To eliminate this dependency, you can use

const data = require('./countries.json');

This way, the parent folder's name is no longer necessary for the import process.

Answer №2

Execute the command npm install in your terminal to utilize npm, a package manager. This action will download and install all necessary modules for your project based on the existing package.json file within your project directory. The package.json contains a list of dependencies required for your project, which npm will install into a new folder labeled node_modules. I hope this explanation clarifies the process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

As I am practicing my coding skills, I encountered an interesting issue. Any operation that results in a negative number displays as wrong, but when using console.logs it shows the correct result. Can someone explain why this is happening? <!DOCTYPE h ...

javascripthtmlcalculator

What discrepancies exist between running npm install on Windows versus Linux operating systems?

Just have a quick question to ask. I've been searching online with no luck. If I were to run npm install on a Windows machine to set up my dependencies, would it be viable to transfer the node_modules directory to a Linux machine and execute my nodej ...

javascriptnode.jsnpmnpm-install

I'm currently utilizing lint in my Angular 2+ project. Is there a way to arrange the constructor parameters in alphabetical order

I am struggling to organize the constructor parameters in TypeScript while using TSLINT with Angular9. I am looking for a rule similar to member-ordering that can help me sort them effectively. constructor( // Sort these private readonly router: R ...

javascriptangularlinttslint

Passing a property to a click event handler in ES6 with React: What's the best approach?

Struggling with passing props to a click function in my React learning journey. I'm attempting to make a basic ES6 counter component that increases when a button is clicked. The click function I have so far is: click() { this.setState({ c ...

javascriptreactjs

Enhance the Material UI StepIcon by embedding real icons within the background circle

I have scoured through stack overflow but haven't come across a specific question addressing my issue. I am working on styling a Material UI Stepper component in a unique way. Most examples I've found use withStyles or makeStyles for color custom ...

javascriptreactjsmaterial-uireact-functional-componentuistepper

Communication between child and parent components in Vue.js is an essential feature

Attempting to invoke functions from my component to Vue for the login process. This is the code snippet of my component : Vue.component('auths', { data: function() { return { ip: '', sessiontoken: '' } ...

javascriptvue.jsvue-component

Attempting to show different fields depending on the chosen option

Having an issue with the signup process for my team and competition setup. I want to implement a feature where, if the user selects 'Competition', the promo code field will be displayed. However, this field should only appear when 'Competiti ...

javascriptnode.jsreactjsmaterial-ui

developing a custom modal using a button in a React project with Material UI

Hello everyone, I have a question regarding React. I am fairly new to React and need some assistance with adding a new function that creates a Modal. I want to call this function onClick when the add icon is pressed (line 43). Any help would be appreciated ...

javascriptreactjsmaterial-uimodal-dialog

What is the mechanism of `this` in higher order components?

I am delving into the concept of higher order components by exploring this online resource. However, I am struggling to grasp how this is utilized within one. Am I correct in thinking that the this in the constructor refers to what will ultimately be retur ...

javascriptreactjsecmascript-6componentshigher-order-functions

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

javascripthtmlcsslayout

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

javascripthtmlcsstwitter-bootstrapnavigation

Exploring and identifying matching pairs within a JavaScript object

Currently, I have a JavaScript object that looks like this: records: [ { id: 1, name: michael, guid: 12345 }, { id: 2, name: jason, guid: 12345 }, { id: 3, name: fox, guid: 54321 }, { id: 4, ...

javascriptangularjs

Unable to use the same hexadecimal HTML entity in the value props of a React JSX component

Can someone explain why this code snippet displays dots as password and the other displays plain hexadecimal codes? <Field label="Password" value="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;" type="password" /> While this one disp ...

javascripthtmlreactjsjsxflowtype

Retrieve coordinates of the clicked location with RichMarker in the Google Maps JavaScript API v3

I followed the solution provided here for richmarker.js After implementing it, when I use my_rich_marker.addListener('click', function(event) { console.log(event); //undefined } What I am trying to achieve is to access event.latLng of the ...

javascriptgoogle-maps-api-3

Calculating the function using data in a Vue component

Here is a Vue component along with some data: Vue.component('receipt', { template: '#receipt-template', data: function() { return { tip: 8.50 }; }, computed: { subtotal: function( ...

javascriptvue.jsvue-componentcomputed-properties

Is it possible to pass a variable from an Axios Response in the Composition API up to the root level?

I need to fetch the headings array from an axios.get call and utilize it at the root level within my Vue component. However, when I attempt to return it, I encounter this error: ReferenceError: headings is not defined Here is the script element in my Vue3 ...

javascriptvue.jsaxiosvuejs3

using javascript to create two choices

I am facing a small complication between two select options in my javascript code. Here is the snippet of my javascript: function displayVals() { var singleValues = $("select option:selected").text(); //to stay selected $("#hiddenselect").val(s ...

javascriptjqueryhtml

A Guide to Parsing JSON Data in JavaScript

I am facing an issue with the JSON received from an AJAX call. The problem lies in the unexpected '\t' after a bullet point, causing a JavaScript error in the JSON.Parse(data.d) function. Can you provide advice on how to address this situati ...

javascriptc#json

What techniques can I use to achieve a seamless transition using Javascript and CSS?

I'm striving for a seamless CSS transition. The concept of transition had me puzzled. Even though I utilized the setTimeout method in JavaScript to make my CSS functional, it lacks that SMOOTH feel! Check out my code below. function slideChange( ...

javascripthtmlcss

Issues with Promise execution sequence in ExpressJS Middleware

I need help creating an Express Middleware that checks if the user/password pair in the authorization header exists in a JSON file for educational purposes. I have integrated this middleware into a simple unit converter app. The issue I'm facing is t ...

javascriptnode.jsexpress