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
Related
I have created a simple form using alpacajs, as per the documentation provided by alpacajs.org we can use properties such as optionsSource, schemaSource, viewSource, dataSource for loading the external json files into our application. But what i need is i need to use only one json file for all these. I mean instead of using all these 3 different properties can i use only one parameter for loading the single json file which comes from the backend. please check my code below..
<html>
<head>
<meta charset="UTF-8">
<title>My Little Alpaca Form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.js"></script>
<!-- typeahead.js https://github.com/twitter/typeahead.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/bloodhound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
<link href="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.css" rel="stylesheet" />
<link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="form1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").alpaca({
"dataSource": "/fulfiller/connector-custom-data.json",
"schemaSource": "/fulfiller/connector-custom-schema.json",
"optionsSource": "/fulfiller/connector-custom-options.json",
"viewSource": "/fulfiller/connector-custom-view.json",
"view": {
"parent": "bootstrap-edit",
"layout": {
"template": "threeColumnGridLayout",
"bindings": {
"requestedfor": "column-1",
"location": "column-2",
"shortdescription": "column-3",
"description": "column-3",
}
},
"templates": {
"threeColumnGridLayout": '<div class="row">' + '{{#if options.label}}<h2>{{options.label}}</h2><span></span>{{/if}}' + '{{#if options.helper}}<p>{{options.helper}}</p>{{/if}}' + '<div id="column-1" class="col-md-6"> </div>' + '<div id="column-2" class="col-md-6"> </div>' + '<div id="column-3" class="col-md-12"> </div>' + '<div class="clear"></div>' + '</div>'
}
},
"options": {
"fields": {
"requestedfor": {
"type": "text",
"id": "requestedfor",
"label": "*Requested For",
"typeahead": {
"config": {},
"datasets": {
"type": "remote",
"displayKey": "value",
"templates": {},
"source": "http://www.alpacajs.org/data/tokenfield-ajax1.json"
}
}
},
"location": {
"type": "text",
"label": "*Location"
},
"shortdescription": {
"type": "text",
"label": "Short Description"
},
"description": {
"type": "textarea",
"rows": 5,
"cols": 40,
"label": "Description"
}
},
"form": {
"attributes": {
"action": "#",
"method": "post"
},
"buttons": {
"submit": {
"value": "Submit",
"class": "btn btn-default"
}
}
}
}
});
});
</script>
</body>
</html>
So here in the above code i have used these urls for loading json data..
"dataSource": "/fulfiller/connector-custom-data.json"
"schemaSource": "/fulfiller/connector-custom-schema.json"
"optionsSource": "/fulfiller/connector-custom-options.json"
"viewSource": "/fulfiller/connector-custom-view.json"
So instead of using these 3 different properties can i use only one property like "oneSingleJSONSource": "oneJSONRemoteFile.json"
Can anybody provide inputs?
For Alpaca to be inialized it must have a DOM element + a config object that contains the schema, options and other properties that Alpaca already knew in its core code, so in your case this is possible if you try to modify the alpaca core code... If your objective is only to optimize resource loading you can use only one json file that contains all the configuration and input them in the alpaca initialization $(dom).alpaca(_json_data_from_loaded_file). And if you want to have only schema, options and view settings in on file you should divide the data loaded to 3 objects, 1 for schema, 1 for options and the last one for view settings.
Tell me if you want more details on achieving this.
I'll be glad to help.
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...
}
}
}
}
I was playing few days with Webix, but I don't have enough experience with it, so need sme help.
What I need:
Create simple page with textarea and button. When I press button, it takes data entered in textarea and saves it in N's string in the data/data.php file.
This is what I could do so far:
<!DOCTYPE html>
<html>
<head>
<title>Loading from DB</title>
<link rel="stylesheet" href="C:/__OSS/00. Soft/Webix/codebase/webix.css" type="text/css">
<script src="C:/__OSS/00. Soft/Webix/codebase/webix.js" type="text/javascript"></script>
</head>
<body>
<!--<?php
$filename = getcwd() . "data/data.php";
echo $filename;
$line_i_am_looking_for = 5;
$lines = file( $filename , FILE_IGNORE_NEW_LINES );
$lines[$line_i_am_looking_for] = '6my modified line';
file_put_contents( $filename , implode( "\n", $lines ) );
?>-->
<div class='header_comment'>Test Button</div>
<div id="testB" style='height:600px'></div>
<hr>
<script type="text/javascript" charset="utf-8">
webix.ready(function(){
gridb = webix.ui({
container:"testB",
"view": "form",
"elements": [
{
"view": "textarea",
"name": "woNumber",
"id": "textarea",
"label": "",
"width": 300,
"height": 200,
"options": [
"onViewResize"
],
"value": "",
"placeholder": "WO number (separate with comma if several)",
"labelPosition": "top"
},
{
"view": "button",
"name": "getWODetails",
"label": "",
"value": "Submit",
"options": [
"autowidth:true"
],
on:{
onItemClick:function(id){
webix.message("Sikim BLEAT'!!!");
/* onItemClick: getTextareaData;
*/
}
},
"labelPosition": "top"
},
{
"view": "button",
"id": "button1",
"name": "getWODetails",
"label": "",
"value": "Passss",
"options": [
"autowidth:true"
],
on:{
onItemClick:function(){
webix.message("Values of textarea is "+$$('textarea').getValue());
}
},
"labelPosition": "top"
}
]
});
});
</script>
</body>
</html>
So I can get value from textarea with $$('textarea').getValue()), but have no idea how to write it in the file.
I can do it easily with PHP (commented out part) but don't know how to make it works with Webix. I believe it is not so hard, but can't figure out what to do..
Any help highly appreaciated.
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);
});