Jquery $.each Loop multiple rows

jporter80
jporter80 used Ask the Experts™
on
I have jquery displaying data from a JSON file on my website that is displaying tweets from a particular Hashstag from twitter:

http://ijpweb.com/tweetlist/

The JSON file on my server collects 100 tweets from twitter and caches them and updates every 10 minutes.

Basically want i want to do is only have 4 rows of 25 tweets each.

How can the $.each loop be modified to accomplish this?

here is my code:

<script type="text/javascript">
$(document).ready(function() {
	$.getJSON("json.php",function(data) {
		$.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet').append(listData);
		});
	});
});

</script>
</head>
<body>
<div id="tweet_scroll1">
<div id="Tweet"></div>
</div>
<div id="tweet_scroll2">
<div id="Tweet2"></div>
</div>
<div id="tweet_scroll3">
<div id="Tweet3"></div>
</div>
<div id="tweet_scroll4">
<div id="Tweet4"></div>
</div>

Open in new window


in the end i will be having each row "tweet_scroll" scroll slowly in opposite directions.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
<script type="text/javascript">
$(document).ready(function() {
	$.getJSON("json.php",function(data) {
		$.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3"i>24?"2":"")).append(listData);
		});
	});
});

</script>
</head>
<body>
<div id="tweet_scroll1">
<div id="Tweet"></div>
</div>
<div id="tweet_scroll2">
<div id="Tweet2"></div>
</div>
<div id="tweet_scroll3">
<div id="Tweet3"></div>
</div>
<div id="tweet_scroll4">
<div id="Tweet4"></div>
</div>
                                  

Open in new window


I think that is what you are after, it assumes that you have 100 items, it also assumes that you don't want to update them while the person is looking at the page (that's a bit more difficult and probably unnecessary).

Author

Commented:
I updated the page with your solution and doesnt appear to work:

http://ijpweb.biz/tweetlist/

on a side note.. i was hoping to refresh the data every 10 minutes or so.  Basically i was going to have the Tweets disappear with jquery through fading or sliding down.. then reappear with new tweets.  Does that effect your code?

Author

Commented:
i fixed the error and got it to work...

there was a missing ":" in your code

<script type="text/javascript">
$(document).ready(function() {
	$.getJSON("json.php",function(data) {
		$.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
		});
	});
});

</script>

Open in new window


i have it displaying rows great!.

Now.. does this need to be adjusted if i have things auto update?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Information Systems Manager
Top Expert 2012
Commented:
whoops - sorry about the missing : must have been typing too fast!

yes, this will not update, as I said updating is a bigger issue.

When the people move from page to page then this will update - assuming your json is updated in the backend.

Updating whilst the user is on the page will annoy your users - what if they are just reading the tweet that you go and replace. It's possible though - if you need this, you can either remove all tweets and reload - a case of using this code intead:

  function update(){
    $.getJSON("json.php",function(data) {
      $("#Tweet^").html("");
      $.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
      });
      setTimeOut("update()",600000);
    });
  }
  $(document).ready(function() {
    update();
  }

Open in new window


Or you can repace individual tweets, but this is much more complicated again.

Author

Commented:
thank you so much for helping! i think you were typing to fast again :)  You included a "^" next to #Tweet which was throwing an error.  Also the ");" at the end i think and setTimeOut should be setTimeout .. i made those two edits and it worked

<script type="text/javascript">
function update(){
    $.getJSON("json.php",function(data) {
      $("#Tweet").html("");
      $.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
      });
      setTimeout("update()",600000);
    });
  }
  $(document).ready(function() {
    update();
});
</script>

Open in new window

Author

Commented:
very helpful and even added a little extra more

Author

Commented:
@JonNorman - since you were so helpful i have another question/problem related to this same script here if you want more points :)  http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27727397.html
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
The ^ was supposed to check for all divs with ids that started with Tweet. That way the html of the four divs would be wiped out, not just the first div.

try:

<script type="text/javascript">
function update(){
    $.getJSON("json.php",function(data) {
      $("div[id^=Tweet]").html("");
      $.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
      });
      setTimeout("update()",600000);
    });
  }
  $(document).ready(function() {
    update();
});
</script>

Open in new window


I will have a quick look at the question...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial