Accessing a JSON file from a nearby location using JavaScript

I am currently working on an artistic project based on weather data, which will be hosted locally with the JSON file updating via FTP synchronization. This means that the JSON file will be sourced from the same computer where it is stored. The code snippet below shows how I'm currently sourcing the JSON file externally. I need assistance in altering it to source the file locally. Do I simply change the URL to the file pathway where it will be located and remove the GET and send parts?

var xhr = new XMLHttpRequest();

var URL = "http://api.openweathermap.org/data/2.5/weather?q={London}&appid=genericAPIpassword";

xhr.open("GET", URL, false);
xhr.send();

var weatherResponseStringify = JSON.stringify(xhr.responseText, "", 2);
var weatherResponseParse = JSON.parse(xhr.responseText);

Thank you for any help you can provide!

javascriptjson

Answer №1

const mySecretData = {
  code:1234,
  password:"abcd"
}

Keep it simple. If the data is stored in a separate file, you can include it using:

<script src="externalData.js" ></script>

Alternatively, consider using System.JS Import for asynchronous loading.

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

Navigating to a new URL after submitting a form in React

Hello, I am new to React and have created a form that successfully sends data to Firebase. However, after submitting the form, I would like to redirect to /thankyou.html which is outside of the React app. Can someone please guide me on how to achieve this ...

javascriptreactjs

The value from select2 dropdown does not get populated in my article in Angular

I am attempting to link the selected value in a dropdown menu to an article, with a property that matches the type of the dropdown's data source. However, despite logging my article object, the property intended to hold the selected dropdown value app ...

javascriptangulartypescript

Identifying fluctuations in unprocessed data

Currently in the process of developing a web application that serves as a dashboard for monitoring storage tank levels. It gathers data from various sensors inside tanks and saves this information in a database. The tool is created using express / node.js. ...

javascriptnode.jsexpressdata-analysis

Server-side script for communicating with client-side JavaScript applications

Currently utilizing a JavaScript library that uses a JSON file to display content on the screen in an interactive manner. (::Using D3JS Library) While working with clients, it is easy to delete, edit, and create nodes which are then updated in the JSON fi ...

javascriptajaxshellclient-server

Is there a way to access and parse a CSV file from a URL within a Next.js project?

Currently working on a Next.js application available here. The task at hand requires reading a CSV file from a specific URL within the same repository in multiple instances. Unfortunately, I am encountering difficulties retrieving this data. You can locate ...

javascriptreactjscsvasync-awaitnext.js

Retrieving data from a parent object within an iframe on a different origin

In order to incorporate a feature on various websites, I am looking to embed an iframe with JavaScript. This iframe should have the ability to interact with the parent object and display or hide certain elements on the webpage. The main HTML file includes ...

javascriptnode.jsexpress

Modifying radio inputs to update when a state variable is altered in react.js

In my HTML, I have a div that includes 4 radio inputs, and another div with an onClick event that increments a counter. Every time I click on the div, I want the radio inputs to reload so that no input is selected. Below is the code snippet: 'use clie ...

javascriptreactjsnext.js

Is there a way to align the Material UI mobile menu to the left edge of the screen?

Need help with this UI issue: Currently working on designing a mobile web app using React and Material UI. I'm struggling to get the sidebar menu to start from the left edge of the screen, as it seems to have an unwanted margin preventing it. Any sug ...

javascriptreactjsmaterial-ui

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

javascriptcssvue.js

Invalidating the memory in iOS 7.1.1 when using canvas drawImage

When I use the following code on an animation frame, I notice a significant memory leak that eventually causes IOS Safari or Chrome to crash: ctx.drawImage(anotherCanvas, clipX, clipY, clipW, clipH, x, y, w, h); Interestingly, if I don't apply a ...

javascriptioscanvasmemory-leaks

The challenge of mapping React Select

I have implemented react-select in my project and I am using it within a map function like this: renderItems() { this.props.items.map(item => ( <Select id="options" value={this.state.optionSelected} onChange={this.onChangeOpt ...

javascriptreactjsreact-select

What could be the reason for the malfunction of the select (mongoose query)?

I'm trying to retrieve a User's highest score post. To accomplish this, I am querying the Post model and looking for posts where their user._id matches the author in the post. Everything is functioning correctly in this regard. However, my goal ...

javascriptnode.jsexpressmongoose

What is the best way to merge an array of objects into a single object?

Is there a way to dynamically convert object1 into object2, considering that the keys like 'apple' and 'water' inside the objects are not static? const object1 = { apple:[ {a:''}, {b:'&apos ...

javascriptreactjstypescriptnext.js

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

At the moment, I am using the Month selector and Year selector for Date of Birth in the react-datepicker component within a guest details form. The current functionality is such that the selected date is highlighted on the calendar, which works fine. How ...

javascriptreactjsecmascript-6react-datepicker

Transferring an array from PHP to jQuery through the use of AJAX

My JavaScript code communicates with a PHP page to retrieve data from a database and store it in an array. Now, I would like to use jQuery to loop through that array. This is how the array is structured: Array ( [0] => Array ( [image] => articl ...

phpjavascriptjqueryajaxarrays

Is there a way to extract both a and b from the array?

I just started learning programming and I'm currently working on creating an API call to use in another function. However, I've hit a roadblock. I need to extract values for variables a and b separately from the response of this API call: import ...

javascripttypescript

Reaching out to a particular individual with a message

In my coding dilemma, I am trying to make a bot send a message every minute to a particular user, not all users. The struggle is real! guild.members.cache.forEach(member => { setInterval(() => { member.send('hello').catch(error =&g ...

javascriptnode.jsdiscord.jsbots

issue with AJAX POST request not functioning correctly upon form submission

Having an issue with Ajax post while trying to submit a form event. I am working with a table that is generated by opentable.php. Here is the code for opentable.php: <?php session_start(); require("dbc.php"); $memberid = $_SESSION['memberid' ...

javascriptphpajaxforms

node js retrieves information from the request body

Hey there! I'm diving into the world of Node.js and JavaScript, but I've hit a roadblock. I'm trying to fetch data from a URL using node-fetch, then parse it as JSON. However, I keep running into the issue of getting 'undefined' in ...

javascriptnode.jsnode-fetch

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

javascripthtmlangularjsng-bind-html