I wanted to print this array: photolist into my DIV called: fotolist, but don’t know how to. I want to print the array after it loops through both completely. How do I do this?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
API_KEY = 'YOURAPIKEY'; //INSERT API KEY
USER_ID = '22694125#N02'; //ENTER USER ID
var photolist = [];
$.getJSON('https://www.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=' + API_KEY + '&user_id=' + USER_ID + '&format=json&jsoncallback=?', function(rest) {
var numPhotos = rest.photos.pages;
for (var u =0; u < numPhotos; u++) {
$.getJSON('https://www.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=' + API_KEY + '&user_id=' + USER_ID + '&format=json&jsoncallback=?&pages=' + u, function(results) {
for (var m =0; m < results.photos.total; m++) {
photolist.push("https://www.flickr.com/" + results.photos.photo[m].owner + "/" + results.photos.photo[m].id);
}
});
}
});
});
</script>
</head>
<body>
<div id="fotolist">
</div>
</body>
</html>
Use .append if you want to push content into an already existing div. Make sure targetDiv is declared outside the $.getJSON call.
var targetDiv = $('#printDiv');
for (var m =0; m < results.photos.total; m++)
{
targetDiv.append("https://www.flickr.com/" +
results.photos.photo[m].owner + "/" + results.photos.photo[m].id);
}
Push items to an array
Join the items in the array
.append() the items to your target
DEMO
jQuery:
var myList = [];
for (var i = 0; i < 9; i++) {
myList.push('<li>');
myList.push('My name is Agent 00' + i);
myList.push('</li>');
}
$("#target").append(myList.join(''));
HTML:
<ul id="target"></ul>
This will do the trick.
a. Here is a one liner assuming array contains only links:
$("#fotolist").append(photolist.join(" </br> "));
</br> is present to break the lines, if you don't want to break line, just remove that part
b. Paste the code after the for loop.
$.each(photolist, function(){
$("#fotolist").append(this);
});
c. Though the above method will work, we are refreshing the DOM often.
So you need to create a DOM fragment and add all text/html to it and then append it to DOM for performance reasons.
var html = "";
$.each(photolist, function(){
html +=this;
});
$("#fotolist").append(html);
EXAMPLE
Related
How does a loop work in a string like this?
var w = window.open('','','width=792,height=612');
$(w.document.body).html('<div>'+
'<ul>' +
for(var i=o; i<=10; i++){
'<li>'+ i +'</li>'+
}
'</ul>'+
'</div>');
I highly suggest you create your string before inserting it into your table.
$(document).ready(function(){
var w = window.open('','','width=792,height=612');
var myString = "";
for(var i=0; i<=10; i++){
myString += "<tr><td>hello</td></tr>";
}
$('body').html('<table>' + myString + '</table>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
I also corrected a lot of your code since there was a few error, ex: var i = o instead of i = 0.
I am trying to list my blog posts under a specific label in alphabetic order. Since I am not a programmer, I found this code from internet, which lists all my posts labeled "subtitles" in a chronological order. I didn't find any way to sort the result in alphabetic order. Previously I was using yahoo pipes for this purpose, since yahoo pipe no longer exists this kind of code is very much needed. Any other code which might give the proposed result is also appreciated.
<!-- Recent Posts by Label Start -->
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ol>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "' + entryTitle + " </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://www.malayalamsubtitles.org/feeds/posts/summary/-/subtitles?max-results=500&alt=json-in-script&callback=recentpostslist"> </script>
<!-- Recent Posts by Label End -->
I need to ask for help.
Having this code:
$(".apprezzamenti").click(function()
{
var id = $(this).attr('id');
$.get("http://localhost/laravel/public/index.php/apprezzamenti_modal/"+id,
function(data)
{
data_parsed = JSON.parse(data);
// BELOW is the loop that I would like to generate multiple div using .append()
for(var i=0; i<data_parsed.length; i++)
{
var html = '<img src="images/provvisorie/immagine-profilo.png" width="30px" and height="30x" />';
html += ' ';
html += "<a href='http://localhost/laravel/public/index.php/utente/" + data_parsed[i].id_user + "' style='font-weight: bold;'>" + data_parsed[i].username + "</a>";
$(".modal-body-apprezzamenti>p").append(html).append('.modal-body-apprezzamenti>p').append($('<br/>'));
}
$(".chiudi-popup").click(function()
{
$(".modal-body-apprezzamenti>p").html('');
});
$('#main').click(function()
{
$(".modal-body-apprezzamenti>p").html('');
});
});
});
I'd like to create a div for each looping.
How could I do? Thanks for your help.
With jQuery it's very easy, look at this JSFiddle
http://jsfiddle.net/Ldh9beLn/
I use the function jQuery appendTo() to insert each div inside another div with id = "inserts" if you don't understand a section of this code or how to adapt to yours leave me a comment.
var things = ["apple", "house", "cloud"];
for (var i = 0; i < things.length; i++) {
$("<div>"+things[i]+"</div>").appendTo("#inserts");
}
I am trying to get tweets from different zip codes.For doing this, I am using latitude and longitude values for each zip code. So far I want to get 3 tweets for each zip code(I have 2 zip codes), but it is working only for one zip code.
Any suggestion will be appreciated. Thank you in advance!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat=[41.9716,42.0411];
var lng=[-87.7026,-87.6900];
$(document).ready(function() {
for(var i=1; i<2; i++)
{
$.getJSON('http://search.twitter.com/search.json?q=business&geocode='+lat[i]+','+lng[i]+',5mi&lang=en&callback=?', function(data) {
var data = data.results;
var html = "";
for(var j=0; j<3;j++){
html += "<div style='width:600px;border:solid thin blue'><img src='"+data[j].profile_image_url+"'/><a href='http://twitter.com/" + data[j].from_user + "'>#"+ data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content'+i).html(html);
}); }
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>
I found 2 problems with your code:
1) If you want to iterate 2 times, your for function should be like this: for (var i = 0; i < 2; i++)
2) You must have in consideration that the function that gets called in $.getJSON runs asynchronously, so when that function gets called the for will have already finished, therefore you can't use the i value with that purpose inside that function.
So, after correcting those 2 things in your code you should be able to get what you want. Try with something like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat = [41.9716, 42.0411];
var lng = [-87.7026, -87.6900];
var count = 1;
$(document).ready(function () {
for (var i = 0; i < 2; i++) {
$.getJSON('http://search.twitter.com/search.json?q=business&geocode=' + lat[i] + ',' + lng[i] + ',5mi&lang=en&callback=?', function (data) {
var data = data.results;
var html = "";
for (var j = 0; j < 3; j++) {
html += "<div style='width:600px;border:solid thin blue'><img src='" + data[j].profile_image_url + "'/><a href='http://twitter.com/" + data[j].from_user + "'>#" + data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content' + count++).html(html);
});
}
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>
</html>
How do I get to list down the stored records in the for loop?
Basically I want it to list down the records like this:
'<div id="record_' + number + '">' + localstorage value + '</div>'
The number in the class should add 1 every record, e.g. 1, 2, 3, 4 every record it lists down, and so on.
The localstorage value should show the localStorage[] but the problem is, the localStorage name has the same, e.g.
(clicks on button)
it will save the value of the URL into a localStorage
I then open the application and shows the window.html
inside there is list of stored records by using this:
'<div id="record_' + number + '">' + localstorage value + '</div>'
INCLUDING the record number to add per record 1, 2, 3, etc... like this:
<div id="record_1">localstorage value</div>
<div id="record_2">localstorage value</div>
<div id="record_3">localstorage value</div>
<div id="record_4">localstorage value</div>
<div id="record_5">localstorage value</div>
<div id="record_6">localstorage value</div>
etc...
EDIT:
for (var i = 1; i < localStorage.length; i++) {
document.write('<div id="record_' + i + '">' + i + '<span style="float:right;">Delete</span></div>');
}
window.addEventListener("load", windowLoaded, false);
function windowLoaded()
{
chrome.tabs.getSelected(null, function(tab)
{
var btn = 'Add to Favourites';
document.getElementById('current-link').innerHTML = '<p>' + btn + '</p>';
});
}
function Save(url)
{
localStorage.setItem("cilium-favs", url);
}
You can iterate localStorage as well.
for (var i=0; i < localStorage.length; i++) {
console.log(localStorage.key(i));
}
Is that what you want?
I think this is more what he was looking for. A couple of years late, but Mohamed Mansour's answer helped me, and this might help others.
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
console.log(i, key, localStorage[key]);
}