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
Related
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#load_data').click(function () {
$.ajax({
url: "iguana.csv",
dataType: "text",
success: function (data) {
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < employee_data.length; count++) {
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
}
else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
while running this code I'm getting the following error:
jquery.min.js:4 Access to XMLHttpRequest at 'file:///C:/Users/rkuchhadia/Music/Dash/database_backup/iguana.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
The problem is that you are running the webpage locally, without a webserver. If you want ajax to retrieve files on your computer, you will have to serve them by a webserver.
I would propose that you publish your webpage by using a small express server:
const express = require('express');
const app = express();
app.use(express.static('public')); // where 'public' is the folder containing the files that you want to retrieve.
You can find more information here.
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 .
Been really stressed out for a while, as I'm very new to coding and can't figure out how to transfer some paragraph data across pages.
Here is my code on my first page:
<!DOCTYPE>
<html>
<head>
<h1>z</h1>
</head>
<body>
<p>test</p>
<p id="goalPage"></p>
<script type="text/javascript">
var t = Math.floor((Math.random() * 1) + 1);
if (t === 1) {document.getElementById("goalPage").innerHTML = "Your goal page is Data 1";}
else {alert('Unprecedented failure. Please reload the page and report the bug to me.');}
function testJS() {
var b = document.getElementById('goalPage').value,
url = 'file:///C:/Users/Admin/Desktop/Coding%20Data%20Files/data1.html?name=load' + encodeURIComponent(b);
document.location.href = url;
}
</script>
On my second page, this is my code:
<!DOCTYPE>
<html>
<head>
<h1>w</h1>
</head>
<body>
<p id="goalPage"></p>
<script>
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('goalPage').innerHTML = data.load;
}
</script>
</body>
</html>
I used many other forum answers to try to get a working solution, however I could not. Any help would be appreciated.
I am trying to get some data out of a Google Fusion Table.
I have used the Google documentation to produce a JSON file using by calling the Fusion Tbales API like so:
https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%yyyyyy&key=xxxxxxxxx"
I now what to incorporate this call into a webpage and display the results on the same page.
I have followed the instructions on this page which gives some example code (Calling the API from a browser using JavaScript):
https://developers.google.com/fusiontables/docs/v1/getting_started#JS
I have put the code on my site and replaced the script call with the one from the top of this post.
When I view the page nothing displays on the page and i get an error in the Google console saying: Uncaught TypeError: Cannot read property 'length' of undefined
Does any one know of a better example or tutorial on this where the example code works?
OR
Does any on know why this script is failing?
The code:
<html>
<head>
<title>Google Fusion Tables API Example</title>
</head>
<body>
<div id="content"></div>
<script>
function handler(response) {
for (var i = 0; i < response.items.length; i++) {
var item = response.items[i];
// Either show the body or the automatic columns of the template
if (item.body) {
document.getElementById("content").innerHTML += "<br>" + item.body;
} else {
for (var j = 0; j < item.automaticColumnNames.length; j++) {
document.getElementById("content").innerHTML += "<br>" + item.automaticColumnNames[j];
}
}
}
}
</script>
<script src="https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%20xxxxq5TFqB4oM-HCQBkRqzOM6uC2qAIJDk91Q&keyXXXXXXXX"></script>
</body>
</html>
When I run your code, I get a javascript error in Chrome:
Refused to execute script from 'https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%20XXXXXXX&key=XXXXXXX' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
You are missing the "callback=handler" parameter in your query (from the example you quote).
Once I fix that your parsing routine is not correct for the data returned, there is no items property of the response. This works for me:
<html>
<head>
<title>Google Fusion Tables API Example</title>
</head>
<body>
<div id="content"></div>
<script>
function handler(response) {
var contentStr = "<table>";
for (var i = 0; i < response.rows.length; i++) {
var item = response.rows[i];
contentStr += "<tr>";
for (var j = 0; j < item.length; j++) {
contentStr += "<td>" + item[j]+"</td>";
}
contentStr += "</tr>";
}
contentStr += "</table>";
document.getElementById("content").innerHTML = contentStr;
}
</script>
<script src="https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%20XXXXX=XXXXXX&callback=handler"></script>
</body>
</html>
working example
Is there any way to know the IDs and Names of all the objects on a page? Any tool?
with jQuery (+ FireBug for console.log):
var ids = [], names = [];
jQuery('body *').each(function(){
var id = $(this).attr('id'),
name = $(this).attr('name');
id && ids.push(id);
name && names.push(name);
});
console.log(ids, names);
The following XPath expression returns all elements that have either an id attribute or a name attribute:
//*[#id or #name]
You can test that using the Firebug Firefox Add-on for example by entering this in its console:
$x('//*[#id or #name]')
The most practical way to do this is to have a DIV that totally encapsulates your webpage. With this, you can view all it's child elements.
The Page:
<html>
<head>
<title>Awesome Page</title>
<!-- Script Below Goes Here -->
</head>
<body>
<div id="everything">
<!-- All your elements on page -->
</div>
</body>
</html>
The Script:
<script type="text/javascript">
function DisplayFormValues()
{
var str = '';
var elem = document.getElementById('everything').elements;
for(var i = 0; i < elem.length; i++)
{
str += "<b>Type:</b>" + elem[i].type + "  ";
str += "<b}>Name:</b>" + elem[i].name + " ";
str += "<b>Value:</b><i>" + elem[i].value + "</i> ";
str += "<BR>";
}
}
</script>