Troubleshooting: Issues with retrieving JSON data from an external domain using AngularJS $http.get

I am currently facing a challenge in extracting data from an external domain using angularjs. Despite no issues showing up in the console, I have made several attempts and even created a fiddle. Any guidance or help would be much appreciated.

View Code

<div ng-controller="myCtrl">{{response}}
    <button ng-click="getData()">GET Request</button>
</div>

Controller code

angular.module('myApp', [])
    .controller('myCtrl', function ($scope, $http) {
    $scope.getData = function () {
        $http.get("http://api.openweathermap.org/data/2.5/weather?zip=98007,us").success(function (response) {
            $scope.myData = response;
            console.log(response)
        });
    };
});

Answer №1

There are a few things missing in your code that need to be addressed in your markup. Make sure you include ng-app and use {{myData}} instead of {{response}}. This is because myData is bound to your scope and assigned to response, there is no variable named response bound to your scope. You can refer to this plunker for an example.

<body ng-app="myApp">
  <div ng-controller="myCtrl">{{myData}}
      <button ng-click="getData()">GET Request</button>
  </div>
</body>

Answer №2

Simply include ng-app in either the body or html tag.

Based on the examination of your jsFiddle, it appears that the main issue you are facing is the omission of the app name in your HTML code.

For an updated jsFiddle, click here: http://jsfiddle.net/kn4yaoco/3/

Upon checking the console, you will notice that your request is now receiving a proper response.

Answer №3

When utilizing the browser's developer tools, what information is displayed in the network tab? Can you determine if the request was successful or if it was not even made?

Answer №4

To properly handle the promise in $http, you should use .then like this:

$http.get("http://api.openweathermap.org/data/2.5/weather?zip=98007,us")
  .then(function(response) {
     console.log(response);
  }):

Have a great day!

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

Guide: Playing an audio file stored on your device using Tauri

I'm currently developing an mp3 (audio) player using Tauri and Vue.js. Despite trying various solutions, none of them seem to work for me. The player is implemented with a simple video tag : <video ref="video" :key="queryUrl" ...

The program is only displaying a portion of the linked list, rather than showing the complete list

Currently, I am working on converting arrays into linked lists and vice versa. The challenge I am facing is that when I try to log the linked list I have created, it shows incorrect values. However, when I convert the same linked list back into an array, t ...

Incorporate a personalized menu into the FullPage.js section

Seeking advice on fullpage.js for my website - Can a non-sticky menu be added to all sections without affecting loading speed? I attempted to include the menu code in each section, but it slowed down my website. Any suggestions or tips? ...

Bokeh is having trouble loading from the CDN

I am currently attempting to embed a plot along with its data by utilizing autoload_static within a straightforward html page that I wish to view locally on my computer. According to the documentation, all I need to do is place the .js file in the specifie ...

variable scope updates on its initial occurrence

I'm encountering a weird issue with my AngularJS stopwatch. The code I'm using to update the timer is as follows: $scope.seconds = $scope.minutes = $scope.hours = "00"; $scope.timer = { h: 0, m: 0, s: 0 }; $scope.runTimer = functio ...

Creating a mongoose model for export

I am struggling to export the mongoose variable to another JS file and I can't seem to make it work properly. My goal is to export the user variable, which is a mongoose model. Whenever I try to include the mongoose things directly into results.js, I ...

Tips for revealing a position: absolute div that is currently hidden with display: none styling

Below is the code for a div element that I want to temporarily hide using JavaScript: <div id="mydiv" style="position: absolute; top: 60px; left:5px; right:25px; bottom:10px;"> </div> After hiding it with display:none in my ...

When accessing Ruby on Rails with Android Studio, the default method is set to POST

Although I have some familiarity with android studio, I am relatively new to ruby on rails and have been exploring the creation of a restful application. I decided to generate a scaffold named Employer, which resulted in the default routes, employers GET ...

How can we showcase nested weather information retrieved from a German API (DWD)? Would there be any issues with numbers appearing in

In my previous experience with openweathermap, I successfully displayed weather data without any issues. Recently, I attempted to utilize the same code to fetch weather data from a German API known as Deutscher Wetterdienst (DWD). However, due to the dif ...

Connecting frontend scripts to backend functionality

Utilizing this script, a QR code is scanned and the resulting string is saved in the txtcodigo field. When the textbox is clicked or enter is pressed, the function msgSalida is triggered automatically. However, the goal is to eliminate the need for manual ...

What is the reason behind Selenium not utilizing JavaScript?

I've been a beginner in the world of Javascript for a while now, with my main goal being to use it for creating Selenium automations as part of my journey into QA automation. However, I find myself quite perplexed when it comes to the language. In al ...

Getting the nested object property with pluck using Lodash

I have an array of objects containing character information: var characters = [ { 'name': 'barney', 'age': 36, 'salary':{'amount': 10} }, { 'name': 'fred', 'age': ...

Displaying Angular charts can enhance the visualization of data by mapping chart labels to the properties of an object

Currently, I am utilizing angularJs Charts which can be found at In my possession is an array of objects that looks something like this: let MyArray = [{a: 1, b: 2,c:3}, {a: 3, b: 4,c:10}, {a: 5, b: 6,c:20}, {a: 7, b: 8,c:30}]; The goal here is to connec ...

What is the reason behind taps in TypeScript only registering the first tap event?

One issue I am encountering is that only the first tap works when clicked, and subsequent taps result in an error message: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') Here is the code I am using: https://codepen ...

Guide on how to update a div element without losing submitted information with the help of AJAX and PHP

After creating two HTML pages that incorporate AJAX refresh div tag code and use $_POST to post data from one page to another, I encountered a situation where the PHP page would retrieve data from a MySQL table. Let's take a look at the code I utilize ...

Issue with Bootstrap-vue pagination navigation not functioning correctly (unexpectedly refreshes upon clicking a page)

I recently updated my website's gallery pagination by following a helpful guide. However, I encountered a problem where clicking on a new page number refreshes the entire webpage, unlike the smooth transition shown in the tutorial. This is not the beh ...

Conceal the div element when the contents are equal to zero

Below is the code snippet I am working with: <div class="col-md-6 col-xs-6 StockNumber"> In Stock: <span class="NumberOfStock"> <?php echo $this->product->product_in_stock ?> </span> </div> You can ...

Add an event to your Fullcalendar with a date that is not the same as the present date in your MySQL database

I currently have Fullcalendar set up to display events from a MySQL table (title + datetime) and allow users to add new events by clicking on a specific day within the calendar. However, I am facing an issue where it only adds events to the current day ev ...

Identify the opening of the console for the background page of a Chrome

Is it possible to detect when I click on the "Background Page" for my test plugin on the "chrome://extensions/" page? This question has been boggling my mind. Currently, whenever I open the background page, the console remains undocked. After reading a po ...

How can I prevent tinymce from stripping out my <link> tag?

I'm having an issue with tinymce. dd<script id="kot-id" src="***insert link here***"></script><div id="kotcalculator"></div><link rel="stylesheet" href="***insert link here***" type="text/css" media="screen" /> It seems ...