Is it possible to retrieve an online JSON file while offline using JavaScript?

For my school project, I decided to create a weather website using the Wunderground Weather API. Below is the code snippet I'm utilizing to access the JSON data:

$.getJSON("http://api.wunderground.com/api/<apikey>/conditions/q/" + wlocation + ".json", function(data){
    alert(data);
});

The <apikey> serves as a placeholder for my unique API key, and the $ symbol signifies JQuery in this context.

Upon attempting to load the webpage locally, without publishing it, no alert appears and an error message is generated:

XMLHttpRequest cannot load http://api.wunderground.com/api/<apikey>/conditions/q/<myzipcode>.json. Origin null is not allowed by Access-Control-Allow-Origin.

After conducting some research on resolving this issue, it seems that setting up a web server might be necessary. However, since our project needs to be submitted as a folder containing .html and other related files, I am unsure if there is an alternative method. Time is of the essence with the deadline approaching, so any guidance would be greatly appreciated!

javascriptajaxxmlhttprequest

Answer №1

Absolutely, JSONP can be utilized for this purpose.

It's uncertain if the Wunderground Weather API offers any JSON callbacks. However, jQuery's getJSON function does support JSONP if they have it.

It appears you may be facing challenges due to the Same origin policy.

Answer №2

Here is a snippet of code extracted from the provided link in your original post (). The code utilizes JSONP for data retrieval, as mentioned by @antyrat regarding CORS issues.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
  $.ajax({
      url : "http://api.wunderground.com/api/Your_Key/geolookup/conditions/q/IA/Cedar_Rapids.json",
      dataType : "jsonp",
      success : function(parsed_json) {
          var location = parsed_json['location']['city'];
          var temp_f = parsed_json['current_observation']['temp_f'];
          alert("Current temperature in " + location + " is: " + temp_f);
      }
  });
});
</script>

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

Can anyone recommend any quality libraries for uploading files in Silverlight or HTML that also support metadata?

I am in the process of developing a solution within SharePoint 2010 that allows for the upload of multiple documents while also tagging them with metadata. Is there anyone familiar with an innovative file-upload control or solution that enables the additi ...

javascripthtmlsilverlightsharepointsharepoint-2010

Guide on attaching a function to an Element that is dynamically loaded using Ajax

Including multiple Divs with the CSS class "hello" on my page. I then utilize Ajax to retrieve additional Divs also with the CSS class "hello". This leads to a code snippet being triggered upon clicking the Divs: $('.hello').click(function(){ ...

javascriptjqueryhtmlajax

Tips for aligning an image of varying dimensions in the center

Although I've done some research and attempted to splice together code from various sources, including here, here, and other places, I'm still struggling with centering an image on a webpage. The page in question features three layered .png imag ...

javascripthtmlcss

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

javascriptjqueryhtmlarraysjson

Extracting information from HTML and transferring it to Javascript using jQuery

My goal is to utilize jsGrid for showcasing database data without repeating code extensively. I aim to generate separate grids for each <div> with a specific id while passing on relevant values accordingly. To clarify my objective, here's a sni ...

javascriptjqueryhtml

Retrieving a specific element within a nested array located in an object

Currently, I am utilizing knockout.js in my project and facing issues with accessing a specific element from a multidimensional array stored within my viewModel object. Here is a snippet of my code: var viewModel = { states: [ new state("Virgi ...

javascriptjqueryarraysmultidimensional-arrayknockout.js

Issue encountered with search.run().getRange function when accessing a stored search in suitescript 2.0

I am facing an issue with my saved search in the beforeLoad userevent script. After adding a filter and running the search, Netsuite throws an UNEXPECTED_ERROR. Any ideas on what might be causing this error? var poRec = context.newRecord; var countIt ...

javascriptnetsuitesuitescriptsuitescript2.0

Mars Eclipse, AngularJS and the power of NodeJS

Could you please assist me in understanding the workings of node.js and angular.js within Eclipse? I am using Eclipse Mars and I would like to run my Angularjs project on a local server (localhost:8080) but I am unsure of how to accomplish this. I have a ...

javascriptangularjsnode.jseclipseserver

How can I categorize the message.author.id into different arrays according to numerical values?

There's a coding scenario that involves inserting the message.author.id into an array within a JSON file. The code snippet looks like this: if(message.content.startsWith (prefix + " craft")) { let editedmessage = message.content.slice(pr ...

javascriptnode.jsdiscord.js

The ng-bootstrap modal fails to appear when incorporating [formGroup]="FormName" or formControlName="elementName"

Utilizing ng-bootstrap to create a popup modal has been a challenge for me. When I import FormsModule and ReactiveFormsModule in src/app/modal-basic.module.ts, the code inside it looks like this: import { NgModule } from '@angular/core'; import { ...

javascriptangulartypescriptbootstrap-4ng-bootstrap

The length of the notification is determined by the ReadFlag

JS: function fetchNotifications(){ $.ajax({ url: "getgroupednotification.json", type: "GET", crossDomain: true, success:function(response){ ...

javascriptjsonajax-request

Attempted to display a Google Map within a lightbox, but encountered difficulties in getting it to

I've copied and pasted my code below. It may contain references to Google or Lightbox being undefined, but I'm unsure how to integrate them into the code provided. My goal is to display a Google map within a Lightbox popup, but so far I have been ...

javascriptjquerygoogle-maps

Utilize React Router to communicate with Spring endpoints

In my Spring Boot application, I have various endpoints available. To serve static resources, I rely on the build output from a React project. My goal is to configure the Spring Web Security so that: All requests to /api/** should require authenticati ...

javascriptjavanode.jsspringreactjs

What is the best way to obtain a virtual in mongoose when a property is excluded?

Imagine I have a post Model with fields like UserId, Title, Desc, and a likes array which references UserIds. When querying, I have a virtual property to calculate the number of likes a post has: schema.virtual("numLikes").get(function () { return this. ...

javascriptnode.jsmongodbexpressmongoose

Create a pop-up for confirming deletion

I have a situation in my application where the results are being displayed in table format. Below is a snippet of my code: {% for item in items %} <tr> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td& ...

javascriptjqueryhtmldjango

What could be causing the malfunction of the ajax 'post' method?

My goal is to send data via a POST request to a PHP site and then print the results. However, I am encountering an issue where the PHP print function is not working as expected. Despite searching through various resources and questions, I have not been abl ...

javascriptphpajaxpost

Dynamically add components to the parent div in a Vue file

I am facing a situation where a parent component needs to dynamically add subcomponents based on API responses. The parent component already has some components added in advance, and I need to append new ones to it. <div class="subwalletContainer"> ...

javascriptvue.jscomponents

Interacting with dotnet core 3.1 Razor Pagemodel using Ajax in Bootstrap-table

$("#mTable").bootstrapTable({ method: "POST", url: "@Url.Page("Listing", "Query")", pagination: true, sidePagination: "server", ajaxOptions: { headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]' ...

ajax.net-corerazor-pagesbootstrap-table

Searching for specific key/value pairs in a switch statement in JavaScript

I am working with an array that contains both numbers and objects. Here is an example: var array = [0, 0, 1, 0, 2, {type:player, health:100, xp: 0}, 0, 2, 1, 0, {type:weapon, damage:20}] To dynamically set classes, I loop through the array and store a st ...

javascriptarraysswitch-statement

Interacting with a third-party application via OAuth using Node server to send REST requests

https://i.stack.imgur.com/Znrp0.png I've been working on a server to manage chat messages and need to integrate with a JIRA instance. I'm currently using the passport-atlassian-oauth strategy for authentication and BearerStrategy for requests. H ...

javascriptnode.jsexpressoauth