I can't seem to figure out how to get this code snippet to work. I am trying to access the 'Name' object in this json snippet. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$.getJSON('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22AAPL%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function(data) {
$('#demo').text(data[0].Name);
});
});
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>
Use this:
$(document).ready(function () {
$.getJSON('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22AAPL%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function(data) {
$('#demo').text(data.query.results.quote.Name);
});
});
{
"query": {
"count": 1,
"created": "2017-02-13T18:34:48Z",
"lang": "es-419",
"results": {
"quote": {
"name": "Blabla"
So you have data.query.results.quote.name
Your API call does not return an array, it returns a JSON object.
Try: $('#demo').text(data.query.results.quote.Name);
Here's what the data structure that is being returned looks like:
{
"query": {
"count": 1,
"created": "2017-02-13T18:34:12Z",
"lang": "en-us",
"results": {
"quote": {
// other props...
"Name": "Apple Inc.",
// other props...
}
}
}
}
Related
I am trying to load/read data from a local json file using JQuery/Javascript. Everything I have tried so far is throwing me CORS policy error. I don't know how to resolve this.
<html>
<body>
<div>
Fetch JSON
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#fetch').click(function() {
$.getJSON('music.json', function(data) {
albums = data['Albums']
console.log(albums)
})
});
})
</script>
</body>
</html>
Json file -
{
"Albums": [{
"albumName": "Desire",
"artist": "Bob Dylan"
},
{
"albumName": "Live in London",
"artist": "Leonard Cohen"
},
{
"albumName": "Abbey Road",
"artist": "The Beatles"
},
{
"albumName": "Blackstar",
"artist": "David Bowie"
}
]
}
How to get this running?
You should run your project on the web server, in this case, you can do this:
data.json
{
"albums": [
{
"name": "First Album",
"artist": "Leonard Cohen"
}
]
}
in html or js file:
fetch('http://127.0.0.1:5500/data.json')
.then(response => response.json())
.then(json => console.log(json))
in this case, my webserver local address is http://127.0.0.1:5500
After using the get method I am getting following JSON.
API link https://infocityonline.com/tennis/rest-api/?id=bitcoin
I want to show JSON id value in #id and symbol value in #symbol div.
Right now my code is just showing data in the console.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var settings = {
"async": true,
"crossDomain": true,
"url": "https://infocityonline.com/tennis/rest-api/?id=bitcoin",
"method": "GET",
}
$.ajax(settings).done(function (response) {
console.log(response);
});
</script>
</head>
<body>
<div id="id"> </div>
<div id="symbol "> </div>
</body>
</html>
[
{
"id": "bitcoin",
"symbol": "btc",
"name": "Bitcoin",
"image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
"current_price": 9409.45,
"market_cap": 173153275856,
"market_cap_rank": 1,
"total_volume": 30609526190,
"high_24h": 9582.42,
"low_24h": 9350.51,
"price_change_24h": -29.23718676,
"price_change_percentage_24h": -0.30976,
"market_cap_change_24h": -986277704.740356,
"market_cap_change_percentage_24h": -0.56637,
"circulating_supply": 18388787.0,
"total_supply": 21000000.0,
"ath": 19665.39,
"ath_change_percentage": -52.07157,
"ath_date": "2017-12-16T00:00:00.000Z",
"atl": 67.81,
"atl_change_percentage": 13799.79978,
"atl_date": "2013-07-06T00:00:00.000Z",
"roi": null,
"last_updated": "2020-05-29T18:15:23.854Z"
}
]
You can do something like this
$.ajax(settings).done(function (response) {
response = JSON.parse(response)
document.getElementById('id').innerHTML = response[0].id;
document.getElementById('symbol').innerHTML = response[0].symbol
});
Here is the codepen: https://codepen.io/kishin-karra/pen/VwvoeLm
I'm beginning to use html charts to display data coming from json files. Up until five days ago, I very rarely did anything with html charts. But now that's all I do.
So I'm using an anychart chart, and I've been trying to find a way to populate the chart with a 'json` file.
After much trial-error, I was able to somewhat separate the data and move it to a json file. The problem is that the file's not completely json string.
As you can see, MyFile.json has the json string and some chart components. I would like my json file to be only json data; everything else should be in the html, another javascript, or anywhere else. But it cannot be in the json file.
In other words, MyFile.json should only include this:
{"x": "January","value": 10000},{"x": "February","value": 12000}, {"x": "March","value": 18000}]
Is this possible? Any help is appreciated. Thanks.
Here's MyFile.json:
{
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": [{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
}],
"container": "container"
}
}
And here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON('MyFile.json', function(data) {
console.log(data);
anychart.fromJson(data).draw();
});
});
</script>
If I understood your question correctly... There might be a way within Anycharts to do this in a better way (like assign an object as the "settings" then assign a different one wit the "data"), but here's one way that you could implement this yourself:
JSON file:
[{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
AJAX request in javascript file:
$(document).ready(function(){
$.getJSON('MyFile.json', function(data) {
var wrapper = {
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": data // adding the ajax response data
}],
"container": "container"
}
};
anychart.fromJson(wrapper).draw();
});
});
You can embed json data in a html element using data-* attributes.
One approach is to append each chart into the container first and then set jquery data with the series.
$.getJSON('MyFile.json', function (charts) {
for (var i = 0, len = charts.length; i < len; i++) {
$('#container').append('<div id="chart_' + i + '"></div>');
$('chart_' + i).data('series', charts[i].series.data);
}
});
The following code should display the id out of the JSON-object, which I got from a server. I cant find the mistake, could somebody help me? Thank you in advance!
The JSON-object which is returned when http://localhost:8387/nscalemc/rest/mon/resourcestatus.json is called:
{
"groupStatus": [
{
"id": "Application Layer Configuration-ApplicationLayer",
"time": 1332755316976,
"level": 0,
"warningIds": [],
"errorIds": []
},
{
"id": "Application Layer-ApplicationLayer:nscalealinst2",
"time": 1333431531046,
"level": 0,
"warningIds": [],
"errorIds": []
},
{
"id": "Application Layer-ApplicationLayer:nscalealinst1",
"time": 1333431531046,
"level": 1,
"warningIds": [
"documentarea.locked"
],
"errorIds": []
},
{
"id": "Storage Layer-StorageLayerInstance1",
"time": 1331208543687,
"level": 0,
"warningIds": [],
"errorIds": []
}
]
}
My HTML file gadget.html:
<html>
<head>
<title>Monitor</title>
<link href="css/gadget.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/gadget.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
My JavaScript file "gadget.js":
fetch_JSON();
function fetch_JSON() {
var url = "http://localhost:8387/nscalemc/rest/mon/resourcestatus.json";
$.getJSON(url+'?callback=?', function(data) {
$(data.groupStatus).each(function() {
$('#content').append('<p>ID: ' + $(this).id+ '</p>');
});
});
}
EDIT:
Thank you for your solutions! I debugged via Firebug and found out, that the getJSON-call ends with status "401 unauthorized"..
You should do
$('#content').append('<p>ID: ' + this.id+ '</p>');
fiddle here http://jsfiddle.net/JaxpC/
EDIT - of course you should use the ready handler to make sure thatthe dom is present (i don't think that's your case because there i an ajax call involved, but better be sure
$(function() {
var url = "http://localhost:8387/nscalemc/rest/mon/resourcestatus.json";
$.getJSON(url+'?callback=?', function(data) {
$(data.groupStatus).each(function() {
$('#content').append('<p>ID: ' + this.id+ '</p>');
});
});
});
You are running the script immediately and have placed it before the div. #content doesn't exist when you try to append data to it.
Move the script to just before </body>.
$(document).ready(function(){
fetch_JSON();
function fetch_JSON() {
var url = "http://localhost:8387/nscalemc/rest/mon/resourcestatus.json";
$.getJSON(url+'?callback=?', function(data) {
$(data.groupStatus).each(function() {
$('#content').append('<p>ID: ' + this.id+ '</p>');
});
});
}
});
I'm able to iterate through a simple json loop, but actually the API i'm working with returns a response with multiple headers and I tried different methods to access the results objects but still not working, the response looks like this:
"meta": {
"name": "openaq-api",
"license": "CC BY 4.0",
"website": "https://docs.openaq.org/",
"page": 1,
"limit": 100,
"found": 1544
},
"results": [
{
"city": "Buenos Aires",
"country": "AR",
"locations": 4,
"count": 8064
},
{
"city": "Gemeinde Wien, MA22 Umweltschutz",
"country": "AT",
"locations": 21,
"count": 136958
},
What I'm trying to do is to access results then iterate with cities infos, my runnable attempts:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<title>Open AQ API</title></head>
<body>
<div id="data"></div>
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript">
var url = "https://api.openaq.org/v1/cities";
$.getJSON(url, function (data) {
var json = data
$.each($.parseJSON(json), function() {
alert(results.this.city);
});
});
</script>
</body>
</html>
Attempt 2 :
// data[i]
$.each(data, function(i, item){
$('#data').append(
$('<h1>').text(item.results.city),
$('<div>').text(item.results.country),
$('<h6>').text(data[i].results.count),
);
});
This works just fine, try this instead for your jQuery.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<title>Open AQ API</title></head>
<body>
<div id="data"></div>
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript">
var url = "https://api.openaq.org/v1/cities";
$.getJSON(url, function (data) {
$.each(data.results, function(i, result) {
console.log(result.city);
});
});
</script>
</body>
</html>
Kindly update below logic, data will give full response, SO you have to take results from data like $.parseJSON(json).results and then run for each loop as shown below.
$.each(json.results, function(index,value) {// json is same as data as per your code
alert(value.city);
});