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 .
Related
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>
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.
This is the backend Java Side with Jersey in an embedded Jetty.
#GET
#Path("/jason")
#Produces({MediaType.APPLICATION_JSON})
public MyJaxBean getMyBean() {
MyJaxBean myJB = new MyJaxBean();
myJB.add("Hello", 1);
myJB.add("World", 2);
return myJB;
}
checking that with curl brings back this text
{"person":[{"name":"Hello","age":1},{"name":"World","age":2}]}
Using that in an HTML Page
<p id="demo"></p>
<button onclick="doRequest()">REQUEST !</button>
<script>
"use strict";
function doRequest(){
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8080/api/entry-point/jason";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
var myHTML = iterateObject(myArr);
document.getElementById("demo").innerHTML = myHTML
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function iterateObject(myArr) {
var out = '';
myArr.person.forEach(function(p) {
out+= p.name + ',' + p.age + '<br>';
});
return out;
}
</script>
brings back
Hello,1
World,2
However this try with AngularJS does not show anthing from the Jason Call
<!DOCTYPE html>
<html>
<script src= "http://localhost:8080/ressources/angular.js"></script>
<body>
<h2>AngularJS doing a JSON HTTP Request</h2>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="p in persons">
{{ p.name + ', ' + p.age }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/api/entry-point/jason")
.success(function (response) {$scope.persons = response.records;});
});
</script>
</body>
</html>
Replacing the http.get with
$scope.persons = [{name:"Hello", age:1},{name:"World",age:2}]
does work.
Any Idea what is wrong with the Media Type or the AngularJS Example ?
Thanks for any help here
Change <li ng-repeat="p in names"> to <li ng-repeat="p in persons">. You are setting the value in persons object but using names in the view.
DEMO http://plnkr.co/edit/0aNUfTwyBJYjQjCsP1UU?p=preview
I am attempting to display recent blog posts from a wordpress blog on my non-wordpress HTML site with Google Feed API.
I managed to display the feed but now I am stuck getting the featured images to display as well. Currently it only displayes the list of the 10 recent "headlines" if you will.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("feeds", "1")
</script>
<script type="text/javascript">
var feedUrl = "http://www.harbordev.com/blog/feed/";
var feedContainer=document.getElementById("feedContainer");
$(document).ready(function() {
var feed = new google.feeds.Feed(feedUrl);
feed.setNumEntries(10);
feed.load( function(result) {
list = "<ul>";
if (!result.error){
var posts=result.feed.entries;
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + posts[i].title + "</a></li>";
}
list+="</ul>";
feedContainer.innerHTML = list;
}
else {
feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl;
}
});
});
</script>
</head>
<body>
<section class="section swatch-white">
<div class="container">
<div class="row">
<div class="col-md-12" id="feedContainer">
</div>
</div>
</div>
</section>
</body
How do I show the images as well? On a different entry on here I saw a suggestion like this:
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;
Should this work, where would I insert it? My Javascript skill is mediocre unfortunately, therefore if someone can point me in the right direction or assist with some code I would greatly appreciate it.
You can see the documentation of the resulting JSON here. The images are in the content field (posts[i].content):
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" +
posts[i].title + "</a><p>" + posts[i].content + "</p></li>";
}
If you want to show only the images, you could do that with jQuery
var images = "";
$(posts[i].content).find('img').each(function() {
images += this.outerHTML;
});
And then instead of posts[i].content, append images variable to the list
I have a date picker that I'd like to use to choose an event and then show details from a spread sheet.
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
var stuff= updDate(date);
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1,
});
});
</script>
<script>
function updDate(date){
google.script.run.updDate(date);
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onchange="updDate()"></p>
Hello, world!
<input type="button" value="Close"
onclick="google.script.host.close()" />
</body>
</html>
Google Script:
function updDate(date){
var searchString = date;
var data = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
var s2 = SpreadsheetApp.openById("*************");
var row = new Array();
var k;
for (var i in data) {
//Logger.log("length is: "+data[i].length)
//var p = data[i].length
for (var j in data[i]) {
//Logger.log("We are at i: "+i) //Row
//Logger.log("We are at j: "+j) //Col
if (i !=0){
if(data[i][j] != ""){
if(j == 4){
//Logger.log("date from picker: " + date);
//Logger.log("date from Data: " + data[i][j]);
var ssDate = Utilities.formatDate(data[i][j], "GMT", "MM/dd/yyyy");
//Logger.log("date post Convert: " +ssDate);
if(date == ssDate){
k= i
var p = data[i].length
Logger.log("P is: " +p);
}
}
}
}
}
}
Logger.log("K is: "+k)
var q = 1
while (q <= p){
row[q] = data[k][q];
q++
}
Logger.log("Row: " +row);
return row;
}
Eventually I'd like to get the data read into a table but I've been hitting a wall when it comes to successfully getting the data read into a variable in the HTML.
Right now I get this error:
Uncaught ScriptError: The script completed but the returned value is not a supported return type.
Any help in returning the array "row"(in the google script) to the variable "stuff"(in the HTML) successfully or any pointers about how to better execute this task would be greatly appreciated.
Loren
Edit code:
function updDate(date){
var stuff = google.script.run.withSuccessHandler(myReturnFunction).updDate(date);
Console.log(stuff)
}
function myReturnFunction(){
window.myReturnFunction = function(whatGotReturned) {console.log(whatGotReturned);};
}
Sandy Good had it right in the comments above:
function updDate(date){
var junk = google.script.run.withSuccessHandler(myReturnFunction).updDate(date);
}
function myReturnFunction(whatGotReturned){
console.log(whatGotReturned);
}