Avatar of jporter80
jporter80
Flag for United States of America asked on

Jquery $.each Loop multiple rows

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.
jQueryJavaScriptAJAX

Avatar of undefined
Last Comment
Jon Norman

8/22/2022 - Mon
Jon Norman

<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).
jporter80

ASKER
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?
jporter80

ASKER
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?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER CERTIFIED SOLUTION
Jon Norman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
jporter80

ASKER
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

jporter80

ASKER
very helpful and even added a little extra more
jporter80

ASKER
@JonNorman - since you were so helpful i have another question/problem related to this same script here if you want more points :)  https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27727397.html
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Jon Norman

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...