What is the correct way to fetch JSON data from a remote server using pure JavaScript?

I'm receiving JSON data from a remote server at openweathermap.org. Can anyone help me identify issues with my code? Here is an example of the server's response here

var getWeatherJSON = function (city) {
    var httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
    var jsonText;
    httpRequest.onreadystatechange = function () {
        //====jsonText after getting respons equals null====
        jsonText = httpRequest.readyState == 4 && httpRequest.status == 200 ? httpRequest.responseText : null;
    }
    httpRequest.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=" + city, true);
    httpRequest.send();
    return jsonText;
}
javascriptajaxjsonapiurl

Answer №1

It is important to note that the jsonText cannot be directly returned from the getWeatherJSON function or the onreadystatechange function. Instead, you need to utilize this data within a separate function that can handle it appropriately. For example:

httpRequest.onreadystatechange = function () {
  //====jsonText after getting response equals null====
  jsonText = httpRequest.readyState == 4 && httpRequest.status == 200 ? httpRequest.responseText : null;
  callbackFunction(jsonText);
}

Answer №2

Switching "true" to "false" can make a difference. It actually works!

httpRequest.open("GET", "" + city, false);

If you opt for "true," it becomes an Asynchronous request, which means you need to utilize a "callback function."

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

Changing p tags to br tags on tinyMCE

I need assistance with using tinyMCE as an inline editor. I want it so that when a user is in edit mode and presses enter, <br /> is inserted instead of <p>. I have gone through the manual and FAQ but have not been able to achieve this successf ...

javascripttinymceinline-editing

The discovery of a commitment in the statement. The automation of unwrapping promises within Angular statements has been phased out

Struggling with errors while setting up a new AngularJS project. Here is the code for my app and controller; var app = angular.module('myApp', ['localytics.directives']) .config(['$parseProvider', function ($parseProvide ...

javascriptangularjsexpressionpromisejquery-chosen

Get a calendar that displays only the month and year

I am looking to incorporate two unique PrimeFaces calendars on a single page. The first calendar will display the date, while the second one will only show the month and year. To achieve this, I have implemented the following JavaScript and CSS specifica ...

javascriptcssprimefacesdatepickercalendar

Refresh tab controllers in Angular JS on every click event

Is there a way to refresh the tab controller every time a tab is clicked? Here's the current code: $scope.tabs = [ { id: 'tab1', title: 'tab1', icon: 'comments', templateUrl: 'tab1/tab1.tpl.html&ap ...

javascriptangularjs

Disabling the current date on date pickers in material ui: A step-by-step guide

In my current React project, I am utilizing material-ui-date-pickers and need to prevent users from selecting today's date. This is important in the context of manufacturing products, managing expiration dates, and handling billing processes. Since a ...

javascriptreactjsdatepickermaterial-ui

What could be causing this highchart plot to fail to display in both IE and Chrome?

Check out the plot in this jsfiddle: http://jsfiddle.net/essennsee/y5HCm/ The plot looks good in Firefox, but only shows the legend in IE and Chrome. If I remove the following code snippet it works fine. Is there a different way to format the labels?: ...

javascriptjqueryhighcharts

Revamping the purpose of a function found within an HTML <script> tag

index.html: <script id="change"> function methods(){ return 1; } </script> js.js: ... button.addEventListener("click", ()=>{ document.querySelector("#change").innerHTML = ` function ...

javascripthtml

Engage in a Play app featuring AngularJS frontend navigation

Currently, I am using the Play Framework to develop a REST service and I would like the front end to be built with Angularjs in order to make rest calls. I have configured a route provider as follows: angular.module("getAbscencePlans", ["getAbscencePlans. ...

javascriptangularjsplayframework-2.0

"Implementing drag and drop functionality in Vue.js without the need for a

Exploring html 5 drag and drop functionality using vue js has been a challenging experience for me. After following the w3schools tutorial on drag and drop, I managed to get it working in a basic html file but faced difficulties when implementing it in my ...

javascriptvue.js

Creating a debounce functionality by isolating it from a keydown event listener

I have a table with selectable rows using up and down arrows. When a row is selected, an ajax call is made to fetch the record. To prevent users from spamming ajax requests, I implemented a debounce function called from a directive triggered by a keydown ...

javascriptjqueryangularjsajax

Timing of Bindings in AngularJS

In my setup, I have a controller that calls a service to retrieve a list of categories: $scope.enquiryCategories = CategoryServices.listCategories(); The service then fetches this data from an external API: listCategories: function () { return $http({ ...

javascriptangularjs

Displaying JSON data in an HTML table cell format

Hey everyone, I need some help with the following task: I am working on displaying a list of log lines in an HTML table. Some of these lines will contain JSON strings, and I want to format the JSON data within the table when the HTML file is loaded from ...

javascripthtmljson

To encounter an "undefined" response in the following route of an express application, utilize the next('route') function

const express = require('express') const app = express() app.get('/user/:uid', (req, res, next) => { if (req.params.uid === 'lai9fox') next('route') else next() }, (req, res, next) => { res.send(`<h1& ...

javascriptnode.jsexpress

Integrating webpack and Vue async components from separate projects or domains

Having recently ventured into webpack, I have watched several tutorials and successfully configured it for my project. One of the challenges I encountered was loading vuejs components asynchronously using the following method: <template> <div ...

javascriptwebpackvue.js

Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

I'm currently utilizing next-translate. The default recognition of my routes is as follows: /about <--- /de/about /es/about However, I would like to set a specific locale for all paths: /en/about <--- /de/about /es/about Below is ...

javascriptinternationalizationnext.js

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

I've been struggling with an error in VueJs require function for the past two days. I'm attempting to pass a prop to the Home component and then display the image. Home.vue <template> <BlogPost :post="welcomeScreen"/> <B ...

javascripthtmlvue.js

"ng2-file-uploader necessitates a browser refresh in order to function

I am currently utilizing ng2-file-upload within my Angular 10 project to allow users to upload their photos. The upload process is functioning correctly, but the issue arises when the newly uploaded photo does not automatically appear in the photo list wit ...

javascriptangulartypescripthttpfile-upload

How can I change the background color of my notification box to red if the count is not equal to zero?

When the count equals 0, I don't want any effect on the notification box. However, when the count is not equal to zero, I want the notification box to turn red. I tried implementing this, but it's not working as expected. By not working, I mean n ...

javascriptjquerycssajax

Is your server failing to respond to requests once there are too many within a session?

A web application I developed uses frequent $.ajax() calls to send and receive data between a virtual machine host and client. However, I have encountered a recurring issue where the connection cuts out after a certain number of consecutive calls within a ...

javascriptjqueryajaxapacheserver

Retrieve the outcome of a mongoose query within a designated function

Seeking help with returning a result from my mongoose find operation. While similar questions have been asked before, this one is unique. Here's an example of my user: let UserSchema = new mongoose.Schema({ variable: {type: mongoose.Schema.Object ...

javascriptnode.jsmongodbmongoosepromise