CODEWITHSUNDEEP
javascriptarraysloops
intheburrows
intheburrows

Reputation: 139

Looping through an array and checking multiple conditions

I have an array of files, and want to display only one based on the detected screen width. I'm having trouble trying to loop through and check against both the current item in the array and the next one.

Here are some requirements:

Here's my current code but I can't seem to get the looping/conditions part right: 

const viewportWidth = 1800;
const videos = [{
    url: 'video1.mp4',
    width: 1920
  },
  {
    url: 'video2.mp4',
    width: 1280
  },
  {
    url: 'video3.mp4',
    width: 720
  },
  {
    url: 'video4.mp4',
    width: 560
  },
  {
    url: 'video5.mp4',
    width: 420
  },
];

function getVideoUrl(viewportWidth) {
  if (viewportWidth > videos[0].width) {
    return videos[0].url;
  }

  if (viewportWidth < videos[videos.length - 1].width) {
    return videos[videos.length - 1].url;
  } else {
    let i = 0;
    while (viewportWidth < videos[i].width && viewportWidth > videos[i + 1].width) {
      i++
    }
    return videos[i].url;
  }
}

const videoUrl = getVideoUrl(viewportWidth);

console.log(videoUrl);

Based on the above:

viewWidth = 1200 // should output video2.mp4
viewWidth = 2000 // should output video1.mp4
vewWidth = 300 // should output video5.mp4

Upvotes: 1

Views: 696

Answers (2)

mapa0402
mapa0402

Reputation: 484

The while inside the else will always be executed and always return the second video in this example.

Try to keep it stupid simple instead

Upvotes: 1

C3roe
C3roe

Reputation: 96455

Your approach is way too complicated, IMHO :-)

Just loop through the videos in reverse order, and as soon as you find one with a width greater(-equal) than your viewport width, return that one.

If you didn't find one, then simply return the first one, after the loop.

function getVideoUrl(viewportWidth) {
  for (let i = videos.length-1; i >= 0 ; --i) {
    if (videos[i].width >= viewportWidth) {
      return videos[i];
    }
  }
  return videos[0];
}

Upvotes: 5

Related Questions