2

Currently I'm showing various weather parameters in a table and I also want the current day and the six following days to be in the first column.

I started to create the weekdays like this:

// Make variables for every weekday
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var today = d.getDay();

And my table looks like this.

$('#weakly-table').append('<tr><td>Day</td><td>Temperature</td> <td>Description</td> <td> Pressure </td> <td> Humidity </td> <td> Wind speed </td> </tr>') 

    $.each(weaklyWeather.list, function(index, weather) {
    $('#weakly-table').append('<tr><td>' + weekday[today] + '</td><td>' + Math.round(weaklyWeather.list[index].temp.day) + '&#176C  &nbsp</td> <td> <img src="http://openweathermap.org/img/w/'+ weaklyWeather.list[index].weather[0].icon+'"/>' + '</td> <td>' + Math.round(weaklyWeather.list[index].pressure) + ' Pa' + '</td><td>' + Math.round(weaklyWeather.list[index].humidity) + ' %' + '</td><td>' + Math.round(weaklyWeather.list[index].speed) + ' m/s' + '</td></tr>');

Instead of writing weekday[today] in the first column for every row I want it to be weekday[today + 1], weekday[today + 2] and so on but that will just give me the next day on every row.

Any suggestions?

Markus Olsson
  • 23
  • 1
  • 5

1 Answers1

3

No need to use jQuery if you just want to iterate through an array. A normal JavaScript for loop will do just fine.

for(var i=0;i<weekdays.length;i++){
   console.log(weekdays[i]); //logs the i'th weekday
}

If you want to start at a specific week day you can do 

var today = 2; //Tuesday
var numDays = weekday.length;
for(var i=0;i<numDays;i++){
   console.log(weekday[(i+today) % numDays]); 
}

Fiddle

Fiddle starting with today

What we do is use the modulus operator which represents the remainder. If you are unfamiliar with it, think about it like time in a clock. You're wrapping values (days of week) here (like in a clock).

Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
  • Thanks for the fast answer. What command should I use in my first in my each loop to get the next date every time? By using docuemnt.innerHTMl och .write will overwrite my entire page. I think I still need my each loop for my API retrievals. – Markus Olsson May 17 '13 at 14:08
  • @MarkusOlsson Honestly I wouldn't mix my presentation and business logic by mixing my HTML and JavaScript like that. If you start having string manipulation performed on HTML you're going to have a bad time. Here is an example (of course most of the data is not populated) using KnockoutJS http://jsfiddle.net/eDYas/ . Note how you write HTML and tell knockout what to bind it to instead of doing that sort of string manipulation. You get to keep your code clean like this. – Benjamin Gruenbaum May 17 '13 at 14:26
  • @MarkusOlsson did this end up solving your issue? Are you having more problems? – Benjamin Gruenbaum May 18 '13 at 15:56
  • This looks pretty sweet and I haven't been in touch with knockoutJS before, may be worth looking in too more in the future. The tricky part of how I've done my application (which is a ruby application to start with) is that my tables is not suppoosed to be visible from the start, the are created after the user click on my search button and my getWeather function kicks in and does all the api calls and html manipulation. I guess this is not the ultimate solution (obviously). I need the days to be put in the table at the same time as my api-values is.I did solved it temporarly – Markus Olsson May 19 '13 at 13:13
  • by letting my index value in my each loop to be added to my array, which in some way works as a today++ ^^ – Markus Olsson May 19 '13 at 13:15
  • You can add a `data-bind="visible:` clause in knockout that depends on an observable that is changed in a click if you'd like. Knockout also has special hooks for Rails. If this solved your more general issue, please consider accepting this answer. – Benjamin Gruenbaum May 19 '13 at 13:16