Error in retrieving information from the worldweatheronline API

I have been attempting to retrieve weather information from 'worldweatheronline' by making an $http call in an angular factory:

this.testApi = function(coords) {
        var deferred = $q.defer();

        $http.jsonp(API_ROOTS + '?key=9834687w634087623eg8932te&q=' + coords.latitude + ',' + coords.longitude + '&cc=yes&includeLocation=yes&format=json')
        .then(function(response) {
          deferred.resolve(response.current_condition);
          console.log(response.current_condition);
        }, function(error) {
            deferred.reject(error);
        }
        );
        return deferred.promise;
    };

and controller:

$scope.updateLocalWeather = function() {
      $geolocation.get().then(
        function(position) {
          $weather.testApi(position.coords).then(
            function(weather) {
              $scope.localWeather = weather;

                $ionicSlideBoxDelegate.update();

            }
          );
        }
      );
    };

However, I am encountering an error in the console:

Uncaught SyntaxError: Unexpected token :

Nevertheless, the response is successfully logged when I use console.log:

{ "data": { "current_condition": [ {"cloudcover": "0", "FeelsLikeC": "11", "FeelsLikeF": "51", "humidity": "42", "observation_time": "07:29 AM", "precipMM": "0.0", "pressure": "1029", "temp_C": "11", "temp_F":... (Text may be truncated)

I'm a bit puzzled as to what went wrong here. Any assistance would be highly appreciated.

Answer №1

For improved results, consider parsing JSON:

$weatherData = JSON.parse(weather);

I verified the JSON output using JSON lint, and it appears to be incorrect. Please check the developer console to ensure that the JSON data from the weather service matches what you have displayed. If so, the issue may lie with the API itself, which is beyond your control.

Answer №2

Unfortunately, I made a silly error by not spending enough time thinking about the problem... The mistake arose from my oversight of not including 'callback=JSON_CALLBACK' at the end of my jsonp call... I'm leaving this response in case it might assist someone else...

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

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

EJS: Is there a way to display multiple populated collections from mongoose in EJS file?

Having trouble rendering multiple populated collections from mongoDB in EJS. To provide more context, I'll share snippets of my code: models, routes, and views. Model Schema var mongoose = require("mongoose"); var playerSchema = mongoose.Schema({ ...

Challenges of modifying a scope object in Angular through reference

I am encountering a challenge when trying to update a reference of an object within my code. Here's the scenario: function modifyUserDetails(user) { $scope.initialUser = user; $scope.alteredUser = angular.copy(user); } ...

Ways to remove a row from a div element in JavaScript without relying on tables

Hey everyone, I'm looking for a way to delete a row within a div when a delete button is pressed using JavaScript. The catch is that I need to accomplish this without using a table, only with div elements. Can anyone provide a solution for me? func ...

Setting focus on the require attribute for the <input> tag in a React application

I have a login/register form with multiple input tags. My goal is to automatically set focus and require attribute on the first input tag when the form is opened. I have tried using jQuery and JavaScript to add the required attribute, which works fine. H ...

Timer countdown: Looking for a countdown timer that will reset to 3:00 automatically each time it reaches 0 minutes, and can do so

Seeking a continuous countdown timer that starts from 03:00 and counts down to 0:00, then automatically resets back to 03:00, in an infinite loop. The condition is that no one should be able to manually stop this logic. After researching, I found a Ja ...

Hide the button with jQuery Ajax if the variable is deemed acceptable upon submission

I need to figure out how to hide the submit button if the email entered is the same as the one in the database from action.php. Can anyone help me with integrating this functionality into my existing code? <form onsubmit="return submitdata();"> ...

Turn off the feature of map scrolling on OpenStreetMaps

Is there a way to prevent mouse interactions and scrolling in an open maps iframe? I have already tried adding the attribute scrollwheel="false" to no avail. Are there any CSS methods to achieve this? <iframe id= "mapsource" scrollwheel="false" src="ht ...

What are the most effective strategies for creating cross-platform components using Vue.js 2.0?

In my current project, I am looking to create a universal component library using Vue.js 2.0 that can be seamlessly integrated across various platforms. The focus of this query lies in establishing the most effective styling practices for components. Typi ...

Learn how to effortlessly download a file from Amazon S3 using Angular and ng-click technology

When attempting to download a file from my Amazon S3 bucket using Angular's ng-click, I am receiving a blank file instead of the expected content. HTML <div class="details-field"> RC Book <font class="digit" >({{rcCount}})</font> ...

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Is there a way to ensure that all images maintain the same height and width using CSS percentages, rather than set pixel values? I'm working on displaying images in circles, where most are uniform in size but a few outliers distort the shape. The wide ...

The production build encountered an error after upgrading Angular due to a problem with document.documentElement.setAttribute not being recognized

Recently, I updated my application to Angular 16 and the upgrade was successful. The application is running smoothly without any issues. However, when I attempted to run the command for a production build, ng build --configuration=production I encountere ...

Refresh the component data according to the vuex state

In order to streamline my workflow, I am developing a single admin panel that will be used for managing multiple web shops. To ensure that I can keep track of which website I am currently working on, I have implemented a website object in my vuex state. Th ...

having trouble loading marker in react leaflet within next.js

I am facing difficulty in implementing react leaflet Marker in my next.js project. Below is the code snippet where I have included my map component: const MapSearch = dynamic(import('../../components/Map'), { ssr: false, loading: () => ( ...

Learn how to smoothly transfer a URL from JavaScript to HTML and initiate the download process

I created a website that solely relies on HTML5, CSS and JavaScript to function. The core functionality of this website involves utilizing YouTube URLs. I have stored the URL of a specific YouTube video as a variable, now I am looking for a way to transfer ...

Unable to view PDF files on mobile devices within Ionic app, only accessible through browser interface

I utilized the angularjs-pdf library to display a PDF document from a remote source within a mobile app created with Ionic Framework. While it successfully displays the PDF in the browser, on mobile devices it only shows a blank screen. In addition, I re ...

Utilizing jQuery for multiple ratings from a single IP address

In the midst of creating a basic web application for rating purposes, I encountered a challenge. The issue at hand is that users can only vote once using their IP address. However, when a user rates one item, they are unable to rate any other items. I need ...

Applying the Directive/Isolated Scope as Embedded HTML within an Angular-Bootstrap Popover

If you're using the angular-ui popover, you have the ability to include HTML content within it. However, I encountered some difficulties in placing a directive called sampleDirective inside the popover. Despite my attempts with the $sce.trustAsHtml an ...

Automatically switch/animate CSS classes at defined intervals using jQuery

In the PHP code snippet below, three list items are generated and a CSS class "active" is added/removed on mouseover/mouseout. The JavaScript provided toggles the "active" class for all list items at once when moused over, but the requirement is to anima ...

HTML5 for advanced positioning and layering of multiple canvases

I have 2 canvas layers stacked atop each other, but I need to position them relative to the entire page. The dimensions of both layers are fixed at a width of 800 and a height of 300. My goal is to center the canvas layers regardless of screen size, with ...