I'm attempting to display a list of members of a Meetup group, using their API, see https://api.meetup.com/2/profiles?&sign=true&photo-host=public&group_urlname=pipeline-marketing&page=20.
Specifically I'm trying to display the profile photos of all the members of this specific group in HTML. I tried modifying some code found at http://www.jquerybyexample.net/2013/04/how-to-display-load-images-from-json-file-jquery.html but am having some difficulties. The page is blank. I'm not running it locally.
What am I doing wrong?
<div id="members"></div>
<script>
$(document).ready(function () {
var memberURL = "https://api.meetup.com/2/profiles?&sign=true&photo-host=public&group_urlname=pipeline-marketing&page=20";
$.getJSON(memberURL, function (json)
{
var imgList= "";
$.each(json.results, function () {
imgList += '<li><img src= "' + this.photo_url + '"></li>';
});
$('#members').append(imgList);
});
});
</script>
Thank you!
Related
I have a site page (Wiki Page) that is re-used based on the URL Parameter that is sent when opening the page. The URL Parameter is used to filter out the contents of various document libraries and custom list on the page.
In addition, I would like to add code that will take this URL Parameter and lookup an item in a custom list to get a JPG image and replace the image that is currently on the page. (Or insert it in the upper left section of the page).
Any idea as to how I can accomplish this? Thank you in advance.
Since this site is now punishing students/users learning by rating homework questions as negative, I will rise above the "expert" users and post an answer to this homework. It took me a lot of time, because this is not my expertise.
I created a Script Editor web part with the following code:
<script type="text/javascript" src="../SiteAssets/js-enterprise/DisplayVirtualPicture.CEWP.js"></script>
<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadAll);
function LoadAll()
{getPicture();}
</script>
<img style="max-width:600px" title="undefined" src="https:xxxxxxx/SiteAssets/images/Blank.jpg">
The script DisplayVirtualPicture.CEWP.js is:
var currentID = GetUrlKeyValue('Name');
//console.log(currentID);
function getPicture() {
var mytable = "";
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('VirtualPageLibrary');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'Title\'/><Value Type=\'Text\'>'+ currentID +'</Value></Eq></Where></Query></View>');
var collListItem = oList.getItems(camlQuery);
//clientContext.load(collListItem, 'Include(VirtualPicture, Title, Id)');
clientContext.load(collListItem);
clientContext.executeQueryAsync(function () {
var swListItms = collListItem.getEnumerator();
while (swListItms.moveNext())
{
var swItm = swListItms.get_current();
var mytable = swItm.get_item('VirtualPicture').get_url();
//console.log("img="+mytable);
$("img[title='undefined']").attr("src",mytable);
}
clientContext.executeQueryAsync(onQuerySucceededp,onQueryFailedp);
},
function (sender, args)
{
console.log('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
});
}
function onQuerySucceededp(sender, args) {
//console.log("success-1");
}
function onQueryFailedp(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
It may not be the most efficient way of accomplishing this, but without the cooperation with expert users on this site, it's the best I can do.
I wrote an custom API(node.js app) that gets the info about the blogs from medium.com, right now there is
the author/main pic of the article,
title,
link to the article on medium.com(redundant),
the entire article text, in the JSON output.
Sample API/JSON:
{
"img": [
"https://upload.wikimedia.org/wikipedia/commons/4/42/Blog_%281%29.jpg"
],
"title": [
"The old and the new or not so new: Java vs JavaScript"
],
"link": [
"https://medium.com/#aki9154/the-old-and-the-new-or-not-so-new-java-vs-javascript-760f84e87610?source=rss-887f1b1ddb75------2"
],
"desc": [
"<p>It’s funny how the name JavaScript makes you believe that it is somehow..."
]
}
Then i am polling this API/JSON and spitting out the output in a thumbnail format, basic html for now(no design/CSS).
Where i am stuck is when a user clicks on a thumbnail and i need to make sure that i display the correct article?!
For which i need to display a new page when the thumbnail/article is clicked, i can use #4 from JSON above as an output for that dynamically created new page and put it out nicely)
The issue that i am facing now is how to dynamically produce the correct article when the dynamically created link is clicked?
Right now nothing happens when i click on the thumbnail and that's what this project link displays...
I did some stackoverflow research and read some jQuery docs(event propagation and more...) and was able to make changes to the index.js, below is how it looks like but nothing works, any help will be appreciated...
index.js:
$(function () {
var desc = "";
function newWin() {
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
}
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
console.log(response);
$.each(response, function (k, item) {
title = item.title;
var author = item.img;
desc = item.desc;
output += '<li><img src="'+author+'" alt=""><h2>' + title + '</h2></li>';
$(".cards-in-grid ul").on("click", "li", function(){
newWin;
});
return k;
});
$content.html(output);
});
});
`
$(function () {
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
var list = "li";
$.each(response, function (k, item) {
var listNum = list+k;
var idy = "#"+listNum;
var desc = "";
title = item.title;
var author = item.img;
desc = item.desc;
//GIVE ID to each LI using a variable
output += '<li id="'+listNum+'"><img src="'+author+'" alt=""><h2>' +
title + '</h2></li>';
$content.html(output);
$content.on("click",idy, function(){
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
});
return k;
});
});
});
This worked perfectly, some thinking and pondering and was able to make it work!!
Kindly Upvote the answer, if it helped you! Thanks!
I have a website on one domain, and a blog hosted on blogspot. at the bottom of the homepage on my website, I want to embed a link to the latest post on my blogspot along with the respective article image and title. I have a function that used to work but since i have moved to blogspot, the RSS url is different from what i previously used, thus the function will not work as expected anymore. How can I work this function around the blogspot rss embed link ?? thanks
blogspot rss2.0 embed link
RSS 2.0: http://blogname.blogspot.com/feeds/posts/default?alt=rss
existing function:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
function getRSS(link, number) {
$.ajax(link, {
accepts:{
xml:"application/rss+xml"
},
dataType:"xml",
success:function(data) {
var blogItemArray = $(data).find("item");
var blogItemOne = $(blogItemArray).get(0);
var blogTitleOne = $(blogItemOne).find("title").text();
var blogLinkOne = $(blogItemOne).find("link").text();
var blogDescOne = $(blogItemOne).find("description").text();
var blogImgOne = $(blogDescOne).find("img.hs-featured-image").get();
var blogImgSrcOne = $(blogImgOne).attr("src");
$("#blog-feed-link-" + number).attr("href", blogLinkOne);
$(".vertAlignerImg" + number).append( $('<img class="blog-img-link-'+ number +'" />' ));
$(".blog-img-link-" + number).attr("src", blogImgSrcOne);
$(".vertAligner" + number).append( $('<h2 />', {text: blogTitleOne}) );
}
});
}
$(document).ready(function() {
getRSS('rsslink', "One");
getRSS('rsslink', "Two");
});
</script>
'rsslink' used to be a url that ended in /rss.xml. now it looks like the link above. thanks!
I wonder how to create some kind of custom url in html5
Lets say I have a homepage called test.com and books on a page.
Then depending on what url the user goes to the content of a specific book shows.
For instance: test.com/book/16156161 where 16156161 is what defines which book to show, because onload the id 16156161 from url will be used to get the correct book.
Now I could have this page test.com/book but I don't know how to let it accept a string at the end of the url withut getting a 404.
How can this be done using html/javascript ?
Any help or input is highly appreciated, thanks!
$(function () {
var my_url_list = [12,42]; // your ids
$.each(my_url_list, function( index, value ) {
var href = 'book'+value+' </br>';
$("#links").append(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="links">
</div>
If you're comfortable with node, using the fsmodule you could do this, assuming you have an array of book urls named books:
for (var i = 0; i < books.length; i++) {
fs.writeFile(__dirname + "/books/" + books[i], fileContent, (err) => {
if (err) throw err;
console.log("File successfully saved");
});
}
OK,so I am trying to pull some data from an api. The problem that I have run into is that I am able to find out the information that I am looking for, but am having trouble getting that information out of the console and onto my main index.html page.
Here is my JS code
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
$.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
console.log(info);
});
});
});
Here is my html code
<div id="search">
<h1>API Test</h1>
<input type="search" id="search-keyword">
<button id="myBtn">Try it</button>
</div>
<div id="results"></div>
By doing this, I am able to get pretty much what I am looking for. However I cannot get the data from the console to the actual page.
I have tried appendChild
var bob = document.getElementById(results);
var content = document.createTextNode(info);
bob.appendChild(info);
I have tried innerHTML
var theDiv = document.getElementById(results);
theDiv.innerHTML += info;
..and I have tried .append()
$('#myBtn').click(function() {
$(results).append(info)
})
I'm out of ideas. I realize that I probably have a small problem somewhere else that I am not seeing that is probably the root of this. Much thanks to anyone who can help me with this issue.
"results" needs to be in quotes with regular javascript and for jquery you have already decalred the results variable.
var theDiv = document.getElementById("results");
theDiv.innerHTML += info;
$('#myBtn').click(function(){
results.append(info)
})
Also since you are declaring results outside of your document ready call you have to make sure you html comes before the javascript.
<script>
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
var resultedData = $.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
return info;
});
var resultDiv = document.getElementById("results");
resultDiv.innerHTML += resultedData;
});
});
</script>