How do I extract the odds value from this
JSON File and append it to a html-document?
[{"id":"128995",
"home":"RB Leipzig",
"away":"FC Heidenheim",
"homeLogo":"36360.png","awayLogo":"5885.png",
"url":"",
"odds1":"1.47","
oddsx":"4.39",
"odds2":"8.40"}]
HTML:
<html>
<head>
/*script src*/
</head>
<body>
<span id="odds"></span> /*output value from json odds */
</body>
</html>
I've tried something like this:
<script type="text/javascript">
$(function() {
$.getJSON( "http://myJson.json", function( data ) {
var items = [];
items.push( "<span>"+ data.odds1 + data.odds2 + "</span><br />" );
});
});
</script>
I want to extract odds1 oddsx odds2 and put those values into a HTML file.
Any help would be much appreciated!
This should work, if you are willing to use something like jQuery.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON TEST</title>
<meta name="generator" content="BBEdit 11.5" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$.getJSON( "http://pathto/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<span id='" + key + "'>" + key + ": " + val + "</span><br />" );
});
$( "<div/>", {
"class": "my-new-list",
html: "<p>Summary of JSON data:</p>" + items.join( "" )
}).appendTo( "body" );
$("#odds").html("odds1: " + data.odds1 + ", oddsx: " + data.oddsx + ", odds2: " + data.odds2);
});
});
</script>
</head>
<body>
<span id="odds"></span>
</body>
</html>
JSON file
{"id":"128995","home":"RB Leipzig","away":"FC Heidenheim","homeLogo":"36360.png","awayLogo":"5885.png","url":"","odds1":"1.47","oddsx":"4.39","odds2":"8.40"}
try this
<script id="myJson" type="application/json">
{
"id":"128995",
"home":"RB Leipzig",
"away":"FC Heidenheim",
"homeLogo":"36360.png","awayLogo":"5885.png",
"url":"",
"odds1":"1.47",
"oddsx":"4.39",
"odds2":"8.40"
}
</script>
<script type="text/javascript">
$(function() {
var x = JSON.parse($('#myJson').html());
console.log(x.odds1);
console.log(x.odds2);
console.log(x.oddsx);
});
</script>
Related
i have js code like this
var data = {
"items": [
{
"src": "xxx",
"url": "xxx",
"ttl": "xxx%"
},
]};
$.each(data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
its work perfectly but i want replace var data ={xxx} with import url from github
i have try this code but not work :)
$.getJSON('https://raw.githubusercontent.com/user/lokal.json', data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
and this is my json
var data = {
"items": [
{
"src": "https://xxx",
"url": "https://xxx",
"ttl": "METRO TV"
}
]};
plzz help me
You are using .getJSON incorrectly.
.getJSON will return data and you need to use that data to loop over and process.
Check this out: .getJSON
Following code should work for you:
$.getJSON('https://raw.githubusercontent.com/firzi15/stb21/main/lokal.json', function (data) {
$.each(data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
});
this is for you reference. you need to loop through items from your json data.
Demo https://jsbin.com/nicacux/edit?html,js,console,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul></ul>
</body>
</html>
JS
$(document).ready(function() {
$.getJSON('https://jsonblob.com/api/1049293810068373504', data.items, function(i, f) {
$.each(i.items, function(j, v) {
console.log(v, f);
$('ul').append('<li class="scroll-nav">' + v.ttl + '<img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
});
});
<html>
<head>
<title>Vehicle Smart Sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="vehicle-smart-sample-form">
<label for="reg">Enter your reg</label>
<input type="text" id="reg"/>
<button type="submit">Search</button>
</form>
<div id="results">
Results will appear here.
</div>
</body>
<script type="text/javascript">
var myAppId = "<REPLACE-WITH-YOUR-API-KEY!>";
$(document).ready(function () {
$("#vehicle-smart-sample-form").submit(function (e) {
e.preventDefault();
var reg = $("#reg").val();
$.ajax({
"async": true,
"crossDomain": true,
"url": "https://api.vehiclesmart.com/rest/vehicleData?reg=" + reg + "&isRefreshing=false&appid="+myAppId,
"method": "GET",
"headers": {
"Content-Type": "application/text",
"Accept": "application/json",
"Cache-Control": "no-cache"
}
}).done(function (response) {
console.log(response);
if (response && response.Success) {
$("#results").html(
"<p>Make:" + response.VehicleDetails.Make + "</p>" +
"<p>Model:" + response.VehicleDetails.Model + "</p>" +
"<p>Taxed:" + response.VehicleDetails.Taxed + "</p>" +
"<p>Motd:" + response.VehicleDetails.Motd + "</p>"
);
} else {
$("#results").html(
"<p>ERROR: "+response.ServiceMessage+"</p>"
);
}
});
});
});
</script>
</html>
Now the problem is that they have given me notice that NOTE - You should not put your API key in your HTML / JavaScript then where I put the API key to get the values which I need
and I want to implement it in Wordpress do I need still PHP code to get the result
You will not be able to hide this key in your Javascript code, the only way to do it is to wrap your request with PHP or any other Back-End technology.
I am just wanting to output text from a json file to html, api is here: https://shopify.statuspage.io/api
function setup() {
loadJSON("https://d33g96wd23dd.statuspage.io/api/v2/summary.json", gotData, 'jsonp');
}
function gotData(data) {
var output = document.getElementById('output');
output.innerHTML = data.status + ' ' + data.description;
}
<div class="w3-container w3-center" id="output"></div>
You can use the below code if you want to render the first element of the array
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var output = document.getElementById('output');
$.getJSON( "https://d33g96wd23dd.statuspage.io/api/v2/summary.json", function( data ) {
output.innerHTML = data.components[0].status + ' ' + data.components[0].description;
});
});
</script>
</head>
<body>
<div class="w3-container w3-center" id="output"></div>
</body>
</html>
else , you can loop up your append method alternately .
I am using HTML to display my PHP JSON Encoded information but I would like to know how do I display the information in a table? I have already created the PHP which is just a simple array which shows a person's first name, surname and email.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<title></title>
</head>
<body>
<!-- this UL will be populated with the data from the php array -->
<ul></ul>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// call the php that has the php array which is json_encoded
$.getJSON('Test.php', function(data) {
// data will hold the php array as a javascript object
console.log(data);
$.each(data, function(key, val) {
$('ul').append('<li id="' + key + '">' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</li>');
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<title></title>
</head>
<body>
<!-- JSON goes to <tbody> -->
<table>
<thead>
<tr><th>Key</th><th>Name and Email</th></tr>
</thead>
<tbody>
</tbody>
</table>
<script type='text/javascript'>
$(document).ready(function(){
// call the php that has the php array which is json_encoded
$.getJSON('Test.php', function(data) {
// data will hold the php array as a javascript object
$.each(data, function(key, val) {
$('tbody').append('<tr><td>' + key + '</td><td>' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</td></tr>');
});
});
});
</script>
You can append the JSON like this.
I want to show mouse coordinates in a page and when I don't declare DOCTYPE it works but when I declare DOCTYPE it doesn't! Could you please help me with that? here is my code:
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.body.onmousemove = function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
}
</script>
</body>
</html>
In the code above I can get y coordinates with no problem but when I add a doctype it doesn't show y coordinates correctly:
<DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.body.onmousemove = function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
}
</script>
</body>
</html>
EDIT
here is my code and it works perfectly now. Thank you all:
<!DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
if (document.addEventListener) {
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
} else {
document.attachEvent("onmousemove", function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
}
</script>
</body>
</html>
Try do listen mouse event with event Listener, like this:
<!DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
</script>
</body>
</html>
Firstly the correct the declaration of DOCTYPE by writing <!DOCTYPE html> instead of <DOCTYPE html>.
Secondly, change your script to:
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + event.clientX + "<br />" + "Y: " + event.clientY;
});
For the parameters passed in a function can be referred directly, writing window.event would be when event would be a child of window object, in other words a global object.