Connection error: API is down

The current issue I am facing with the application I'm developing is that it is not responding with the API address for weather data. Despite getting a response from Ajax, the specific weather API I am trying to call remains unresponsive.

I have exhausted all possible solutions within my current scope of knowledge.

let search = document.getElementById("search-bar");
let temp = document.getElementById("temperature");
let input = document.getElementById("input");
let city = document.getElementById("city");
const key = "";

input.addEventListener("keyup", enter);

function enter(event) {
    if (event.key==="Enter") {
        details();
    }
}

function details() {
    if (searchInput.value === ""){
    } else {
        let searchLink = "https://api.openweathermap.org/data/2.5/weather?q={}" + searchInput.value + "&appid=" + key;
        httpRequestAsync(searchLink, talk)
    }
}

function talk(talking){
    let jsonObject = JSON.parse(talking);
    city.innerHTML = jsonOject.name;
    temp.innerHTML = parseInt(parseInt(jsonObject.main.temp - 273) + "°");
}

function httpRequestAsync(url,callback){
    var httpRequest=new XMLHttpRequest();
    httpRequest.onreadystatechange = () => { 
        if (httpRequest.readyState == 4 && httpRequest.status == 200)
            callback(httpRequest.responseText);
    }
    request.open("GET", url, true); // true for asynchronous 
    request.send();
}

The desired outcome is for the weather API to be successfully called and for the information to be displayed in the console.

Answer №1

Consider using this revised function instead:

function sendHttpRequestAsync(url, onResponse){
    var request = new XMLHttpRequest();
    request.onreadystatechange = () => { 
        if (request.readyState == 4 && request.status == 200)
            onResponse(request.responseText);
    }
    request.open("GET", url, true); // true for asynchronous 
    request.send();
}

I have updated the variable names for better clarity.

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

Discovering the nearest sibling using jQuery

My HTML code snippet is as follows: $(".remove-post").click((event) => { $(event.target).fadeOut(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="side-bar"> <b ...

Explore the Wikipedia API play area by searching based on the user's input

Having trouble searching Wikipedia based on user input. Initially, I suspected a cross-domain issue, but I believe .ajax should resolve that. You can view the codepen here: http://codepen.io/ekilja01/pen/pRerpb Below is my HTML: <script src="https:// ...

What is the best way to send a POST request to my Rails controller using Ajax?

I'm facing an issue trying to transmit data from my JavaScript game-state on the front end to my controller and ultimately store it in the database. Unfortunately, I haven't received any response so far, and I'm struggling to pinpoint the re ...

Notification from HTML code within Django

In my Django project, I am trying to implement an alert. I am sending data from views.py to singup.html in order to display an alert based on certain conditions. However, initially the alert variable in HTML is not assigned a value. It is only after click ...

Set the minimum height of a section in jQuery to be equal to the height of

My goal is to dynamically set the minimum height of each section to match the height of the window. Here is my current implementation... HTML <section id="hero"> </section> <section id="services"> </section> <section id="wo ...

Monitor $localStorage for any modifications

Utilizing the ngStorage module, which can be accessed at this link: https://github.com/gsklee/ngStorage In order to maintain a lastSeenId for a real-time social feed in my hybrid app (Laravel/AngularJS), I am storing it in localStorage instead of $scope. ...

Enable modification of form field once a personalized dynamic stamp has been applied

I currently have a functional custom dynamic stamp that includes multiple input fields prompting the user. My goal now is to integrate a form text field onto the stamp after it has been rendered. For example, if someone stamps everything except for the led ...

What could be causing webpack to struggle in locating the loader?

Check out my package.json: { "name": "redux-todo", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "start": "webpack-dev-server" }, "devDependencies": { "babel": "^6.5.2", "babel-loader": "^6.2.5", "bab ...

The callback function does not get invoked when using JSONP

Learning jsonP has been a challenge for me as I am relatively new to it. I have done my research by reading various articles but when trying out a simple example, the callback function fails to execute. Surprisingly, there are no errors or exceptions logge ...

Generating various API calls and delivering them to a template (Express + Node.js + Facebook open graph)

I am currently developing a unique Express Node.js application that utilizes the extraordinary capabilities of this remarkable Facebook SDK. Allow me to present my existing route for the root: app.get('/', Facebook.loginRequired(), function (req ...

Optimizing jQuery scripts by consolidating them to reduce file size

I've created a jQuery script that performs the same task but triggers on different events, including: Page load Dropdown selection change Clicking the swap button Typing in a text field However, I had to write separate scripts for each of these eve ...

Execute the JS function during the first instance of window scrolling

Currently, I have implemented a typewriter effect on my website that triggers when the user scrolls to a specific section. However, I want this effect to occur only once. Unfortunately, every time the user scrolls again (in any direction), the function is ...

Each time the button is clicked, the settings and values will rotate, creating a new

I'm looking to create a button system that transitions from "unmarked" to "form" and updates the database with each click. I want users to be able to cycle through the buttons, triggering a post request via ajax to update the associated ID in the data ...

The CORS policy is preventing the AJAX request from functioning properly on localhost

Recently, I have been working on an Angular application that requires interaction with an API. To test it out, I set up an API on my localhost and made a request using AJAX. However, I encountered the dreaded CORS error. Despite trying various solutions fo ...

Utilizing timezones with Moment.js

Currently, I am utilizing momemt.js and moment-timezone.js to present time in the browser. At this time, I have received epoch time from the server which has been converted to central time. My goal now is to exhibit the time in EST/EDT format. To achieve t ...

Sparse planeBufferGeometry in THREE.js is a specialized type of geometry that

I am currently working with a file that contains sparse elevation data derived from GPS information. I have been utilizing this data to fill a PlaneBuffer array with elevations. var vertices = new Float32Array( (grid.NCOL*grid.NROW) * 4 ); for (var i = 0, ...

Adjusting color with the .on method in Event Listener

What's wrong with this code? html <!DOCTYPE html> <html> <head> <title>Ending Project</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> &l ...

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

Generate an array using data received from an Ajax POST request

I have implemented the following code snippet to generate an array through an Ajax Post request. $('#accountholderEmail').on('keyup',function() { $.ajax({ type: "POST", url: "/section/get_data?getCustome ...

Enable users to click on <tr> rows and display the outcome in a div using jQuery

Here are a couple of inquiries: 1. Is there a way to make my table rows clickable and simultaneously load ajax content in the ajaxContent div? 2. How can I incorporate a loading animation within the <div id='ajaxContent'> This page is c ...