Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

Question

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

I am seeking a bookmarklet that, upon clicking, will access JSON data and retrieve the "temp" information to display in an alert indicating the weather with just one click. Is there a method to achieve this or do I need to utilize a different API?

Here's what I have attempted so far:

function insertReply(data) {
    document.getElementById('output').innerHTML = data;
}

var script = document.createElement('script');
script.src = 'http://api.openweathermap.org/data/2.5/find?q=australia,wa&mode=json';
document.body.appendChild(script);

javascript json

Answer 1

Answer №1

Yes, it's important to note that the API available appears to support JSONP. This means that by including a callback parameter in your request, the response will be wrapped with <callback>(...) where <callback> is the value of the callback parameter. For example, you could use this URL:

http://api.openweathermap.org/data/2.5/find?q=australia,wa&mode=json&callback=insertReply

Your insertReply function would then receive the appropriate object. To extract the temp value from it, simply access the content object like this:

document.getElementById('output').innerHTML = content.list[0].main.temp;

Answer 2

Yes, it's important to note that the API available appears to support JSONP. This means that by including a callback parameter in your request, the response will be wrapped with <callback>(...) where <callback> is the value of the callback parameter. For example, you could use this URL:

http://api.openweathermap.org/data/2.5/find?q=australia,wa&mode=json&callback=insertReply

Your insertReply function would then receive the appropriate object. To extract the temp value from it, simply access the content object like this:

document.getElementById('output').innerHTML = content.list[0].main.temp;

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

Answer №1

Similar questions

Await the reply from Angular while using Selenium WebDriver

Enhance the code for updating the content within a div element

Tips for properly modifying an attribute within an array of objects in JavaScript using ReactJS

Eliminate specific key/value pairs from a dictionary falling beyond a particular range

Accessing the camera or photo library in React Native does not require any permissions

Using JQuery to reverse the action of hiding an image

Repeating every other item in a list using ng-repeat in AngularJS

In what way can you dynamically set the displayName using a higher order component?

Blending conditional and non-conditional styles in VueJS

Is there a way to determine the number of syllables in text as it is being typed?

Troubleshooting: Directives in Angular 4 not recognizing RegEx patterns

Toggle the div if the if statement is true; otherwise, hide the broken

Unable to display divs in a stacked format using Bootstrap 5

Incorporating personalized CSS and JavaScript into Shopify

Is there a way to showcase the JSON data within a nested array using VueJS?

Using React Router useHistory to navigate to different routes programmatically

Error encountered while loading Blender model with Three.js JSONLoader: Undefined property 'length'

Discovering the operating system and architecture type for my browser using Node.js - what steps should I take?

Understanding the reason why "undefined" is occurring in Javascript

What is the process for immediately changing the background color of an input field as soon as text is entered?