I'm interested in using json2html to display Google spreadsheet data
on a website.
Specifically, to display contents of this feed on a page:
https://spreadsheets.google.com/feeds/list/0Am0zfph_qjJMdEJrOTQxQ3A1N2xneU9ac003Szd2MVE/od6/public/basic?alt=json-in-script
Under the "Examples" tab on the json2html website, there's a sample for displaying the NHL's feed. This is pretty much what I'm trying to accomplish, but I'm not entirely sure which json tag would go where in the script markup.
Any ideas?
Depends on how you want to display the data (and which data). For now I'm assuming that you want to display the cell entries. Here is something to get you started (note you can also use the jquery plugin with the same transform)
var transform =
{"tag": "li", "children": [
{"tag":"p", "html":"${content.$t}"},
]};
var data = json2html.transform(gData.feed.entry,transform);
document.write('<ul>'+ data + '<ul>');
Related
(Please bare in mind that I am new to Umbraco and JSON!)
In Umbraco, I'm looking to use JSON (alongside HTML and CSS) to turn grid cells into buttons. So far I've accomplished this using the below code (generated from an amalgamation of different tutorials/guides), but this is generating urls which end with the numerical data-id of the page. E.g. www.mywebsite.com/0000/. This works as a link and goes to the correct place, but I'd much rather it generated a URL with the correct name? I.e. something more like www.mywebsite.com/page-name/.
How can this be done?
{
"label": "destination",
"description": "Choose destination",
"view": "treepicker",
"key": "class=\"button\"><a class=\"buttonLink\" href",
"applyTo": "cell"
}
]
If you are using Umbraco, then you can easily get the URL or URlName of the page you are on.
IPublishedContent has all these properties and you can inherit this interface to your class to access these.
Thanks
I want to display a preview of a(ny) file on a panel in a UiApp using GAS.
I'm using DriveApp, not DocsList.
Using file.getThumbnail() or file.getAs(mimeType) I can get a Blob of any file.
Documentation at https://developers.google.com/apps-script/reference/drive/file#getThumbnail%28%29 states that (at least) I can get those blobs being converted to 'application/pdf'.
I don't know how to display those blobs (or pdf-files as such) on a panel.
Can anybody tell me what I should do?
You cant display them inside the panel because you would need to iframe it, which isnt possible even with htmlServices.
Use an anchor to open the link on another page. You can link to the original file.
You can convert a spreadsheet with a pdf but i don"t know with any File.
I use this code
var pdf = DocsList.getFileById(newSpreadsheet.getId()).getAs('application/pdf').getBytes();
var attach = {fileName:'Weekly Status.pdf',content:pdf, mimeType:'application/pdf'};
You cna test It with this source if he can help you .
https://gist.github.com/ixhd/3660885
I'm trying to import all my old starred items from Google Reader into Pocket. I have the JSON file and I've used grep to convert that to a simple text file listing all the URLs (thanks to PaulProgrammer here: Regex to extract all Starred Items URLs from Google Reader JSON file).
The problem now is - how do I get that into Pocket (or Instapaper)?
Does anyone have any ideas to do any of the below?
Import directly from the Google Reader JSON (this was the first thing I searched for and came up with several flawed partial solutions)
You can add URLs by e-mail, but only one at a time. Maybe I can batch up a couple thousand e-mails through GMail somehow?
Any other ideas?
Here's a sample of my URL text file:
http://cheezburger.com/51746049
http://dilbert.com/strips/comic/2013-05-24/
http://lifehacker.com/not-just-another-notes-app-why-you-should-use-google-k-509256637
http://digital-photography-school.com/save-time-with-batch-exposure-blending
http://mgoblog.com/content/what-big-ten-hockey-schedule-looks
http://digital-photography-school.com/how-to-photograph-star-trails
You can use this extension - link , which I have developed. Currently it does not support simple copy pasting of urls. But you can simply create an html page with the hyperlinks you need, open it in chrome and use the extension.
Edit - The extension now supports copy pasting of multiple urls.
You can use the add action from the Pocket API to add many links at once.
Sending an encoded JSON array like this should work:
[
{
"action" : "add",
"url" : "http://cheezburger.com/51746049"
},
{
"action" : "add",
"url" : "http://dilbert.com/strips/comic/2013-05-24/"
}
// truncated for brevity
]
Here is a workaround for Instapaper, for someone who is still interested:
Instapaper allows importing articles from Pocket. So all you need is to put your links in an html file that has the same structure as the file you get when you export your Pocket articles.
Use the HTML file downloaded from Pocket as the template and replace the links with your list:
<li>TITLE_1</li>
Convert your list to HTML file and import directly https://getpocket.com/import/browser
Dumb question time. I was trying to integrate my JSON data with a flipbook plugin, using a Mustache templating system. Needless to say, this wasn't working at all.
I'm a jQuery noobie, so is there any easy way to bind and animate the JSON data to/with a plugin (with or without the Mustache tags)??
From your question it is a bit hard to deduce what you want, but I feel you got already all the pieces together. First the example you have been linking to in a comment: https://github.com/blasten/turn.js/wiki/Making-pages-dynamically-with-Ajax
This fetches not yet loaded pages via Ajax, and the sample code assumes the Ajax call gets HTML back from the server, as can be seen in the code snippet from there (after adding a missing '}':
$.ajax({url: "app?method=get-page-content&page="+page})
.done(function(data) {
element.html(data);
});
Here the done function processes the data it got back from the server by straight injecting it into the element, which is expected to contain the current page.
I assume next that you do have a server side method, but that method returns JSON instead. Let me assume for the moment that it returns the following structure:
{ "title" : "the title of page N",
"text" : "here is some text for the page N." }
The next thing is to render this JSON into into html in the done funktion, before inserting the result into the page. Looking at the short tutorial on the README.md this might look like:
$.ajax({url: "app?method=get-page-content&page="+page})
.done(function(data) {
var pageHtml = Mustache.render("<h2>{{title}}</h2><p>{{text}}</p>", data);
element.html(pageHtml);
});
If the server returns the proper data you should now see a
<h2>the title of page N</h2><p>here is some text for the page N.</p>
appear on the page.
I want to write a Chrome extension that looks at the HTML of the page its on, and if it finds eg <div id="hello"> then it will output, as a HTML list in the popup, 'This page has a friendly div' and if it finds eg I am married to a banana then it will output 'This guy is weird.'
So in other words, searching for specific stuff in the DOM and outputting messages in the popup depending on what it finds.
I had a look at Google Chrome Extension - Accessing The DOM for accessing the dom but I'm afraid I don't really understand it. Then of course there will be traversing the dom and presumably using regex and then conditional statements.
Well that stackoverflow question asked how to let your extension talk to the DOM. There are numerous ways, one way is through chrome.tabs.executeScript, and another way is through Message Passing as I explained in that question.
Back to your question, you could use XPath to search within the DOM. It is pretty powerful. For example you said you want to search for <div id="hello">, you can do it like this:
var nodes = document.evaluate("//div[#id='hello']", document, null,
XPathResult.ANY_TYPE, null)
var resultNode = nodes.iterateNext()
if (resultNode) {
// Found the first node. Output its contents.
alert(resultNode.innerHTML);
}
Now for your second example, same thing ..
I am married to a banana
var nodes = document.evaluate("//a[#href='http://bananas.com']/text()[contains(.,'married')]",
document, null,
XPathResult.ANY_TYPE, null)
var resultNode = nodes.iterateNext()
if (resultNode) {
// Found the first node. Output its contents.
alert('This guy is weird');
}
Well you could use XPath which does work perfectly in Chrome, and you can make your query simple such as finding nodes that you want or even complex with detail. You can query any node, and then do post processing if you wish as well.
Hope that helped. Remember all this should be within a content script in the Chrome Extension. And if you want your extension to communicate to that, you can use Message Passing as I explained in the other post. So basically, within your popup.html, you send a request to the content script to find you text. Your content script will send back a response from its callback. To send the request, you should use chrome.tabs.sendRequest and within the content script.You listen for that request and handle it. As I explained in the other stackoverflow question.
Do NOT use regular expressions to parse HTML. The <center> cannot hold.
With that out of the way... although you can use XPath, I think querySelector is similar in power while being somewhat simpler as well.
You simply pass a CSS selector as a string, and it returns the elements that match the selector. Kinda like using jQuery without needing to load the jQuery library.
Here's how you would use it:
var query = document.querySelector("div#hello");
if (query) {
alert("This page has a friendly div");
}
var query = document.querySelectorAll("a[href='http://bananas.com']");
for (var i = 0; i < query.length; i += 1) {
if (query[i].textContent === "I am married to a banana") {
alert("This guy is weird.");
return;
}
}
document.querySelector finds only a single element, and returns null if that element is not found.
document.querySelectorAll returns a fake-array of elements, or an empty fake-array if none are found.
...however, it sounds like you're wanting to update the browser action popup when something is detected in a webpage, correct? If so, that is possible but immensely more difficult.
Mohamed Mansour's post will get you to the point where you can communicate between content scripts and the background page/popup, but there are other bits that need to be done as well.
Unless the problem is more complex than I think, why not just use jQuery or other convenient js api for this? This is what they were made for - to traverse the dom easily. You can inject jquery and your script that will be using it into required pages in manifest:
"content_scripts": [ {
"js": [ "jquery.js", "script.js" ],
"matches": [ "http://*/*", "https://*/*" ]
}]