Question 50270 in Javascript Question posted in
A very good W3school tutorial can be found here.

Relation between two arrays – Javascript

I’m working on a simple weather app. It shows today and next 4 days weather.

I have two arrays: the first one is WEEK_DAYS, the second is an array of dom elements to display name of the day.

I want that top dom element always show today’s weather. Second must show tomorrow etc.

________app today should display
-SATURDAY < first dom element
-SUNDAY
-MONDAY
-FRIDAY
-TUESDAY < last dom element

________app tomorrow should display
-SUNDAY < first dom element
-MONDAY
-FRIDAY
-TUESDAY
-WEDNESDAY < last dom element

const WEEK_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const daysElements = document.querySelectorAll("span.font-light");  // dom elements
const date = new Date();
const today = WEEK_DAYS[date.getDay()];  // date.getDay() returns a number: 0 for sunday, 1 for monday ... 6 for Saturday

I need ideas here on how to achieve that.

[...daysElements].map((d, index) => {
  d.innerText = WEEK_DAYS.find((e) => e === today);  // of course all dom elements printing "Saturday" (today)
})
Tags:

3

Answers


  1. 0

    You will need to create the respective DOM nodes you want to display using document.createElement(). Here in this example I am using a simple unordered list with list items. The get the parent element (e.g. using querySelector()) and append the children to it using replaceChildren() and the nodes are displayed.

    const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const temperaturesInDegreeCelcius = [21, 23, 19, 10, 18, 25, 24];

const list = document.querySelector(".list");
const listItems = weekdays.map((day, i) => createListItem(day, temperaturesInDegreeCelcius[i]));
list.replaceChildren(...listItems);

function createListItem(day, temperature){
  const li = document.createElement("li");
  li.innerText = `${day}: ${temperature} °C`;
  return li;
}
    <ul class="list">
</ul>
    Login or Signup to reply.
  2. 0

    You’re almost there. Use numbers in calculations, and strings for display:

    const WEEK_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const daysElements = document.querySelectorAll("span.font-light");  // dom elements
const date = new Date();
const today = date.getDay();  // date.getDay() returns a number: 0 for sunday, 1 for monday ... 6 for Saturday

daysElements.forEach((d, index) => d.innerText = WEEK_DAYS[(today + index) % 7]);
    span.font-light {display:block}
    <span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>

    Also it’s ok to use forEach here.

    Login or Signup to reply.
  3. 0

    Good answers. I thought I’d add mine as an example of a C-like for loop.

    let daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const date = new Date();
d = date.getDay();
l = daysOfWeek.length;
const daysElements = document.querySelectorAll("span.font-light");

for (let i = 0; i < 5; i++) {
  daysElements[i].innerText = daysOfWeek[d % l];
  d++;
}
    span.font-light {display:block}
    <span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search