Using switch inside for loop not working as expected

Question

var userChosenBadges - ['Next.js', 'React']


function generateFrameworkBadges(userChosenBadges) {

    var badgeUrlArray = [];

    for (let i = 0; i < userChosenBadges.length; i++) {
        switch (userChosenBadges[i]) {
            case 'Next.js':
                badgeUrlArray.push('url1')
                break;
            case 'React':
                badgeUrlArray.push('url2')
                break;
            case 'Vue':
                badgeUrlArray.push('url3')
                break;
            case 'Angular':
                badgeUrlArray.push('url4')
                break;
            case 'Svelte':
                badgeUrlArray.push('url5')
                break;
            case 'Laravel':
                badgeUrlArray.push('url6')
                break;
            case 'Bootstrap':
                badgeUrlArray.push('url7')
                break;
            case 'jQuery':
                badgeUrlArray.push('url8')
                break;
        }
    }

    console.log(badgeUrlArray);
    console.log(userChosenBadges);
    if (badgeUrlArray) {
        for (let i = 0; i < badgeUrlArray.length; i++) {
            console.log(`![${userChosenBadges[i]}](${badgeUrlArray[i]})`)
            return `![${userChosenBadges[i]}](${badgeUrlArray[i]})`;
        }
    }

}


generateFrameworkBadges(userChosenBadges)

I expected two badges to be returned in markdown format:

![ Next.js ]( url1 ) ![ Vue ]( url3 )

However, I only get: ![ Next.js ]( url1 )

The intended logic is that the for loop will execute a switch statement to return the relevant link for each item in the array. However, it appears only to do so for the first array item.

Unmitigated · Accepted Answer · 2023-01-28 02:05:48Z

Don't return inside the loop, as that will only return the first element. Either build up a result array to return after the loop, or use Array#map.

var userChosenBadges = ['Next.js', 'React']
function generateFrameworkBadges(userChosenBadges) {
    var badgeUrlArray = [];
    for(let i=0;i<userChosenBadges.length;i++)switch(userChosenBadges[i]){case"Next.js":badgeUrlArray.push("url1");break;case"React":badgeUrlArray.push("url2");break;case"Vue":badgeUrlArray.push("url3");break;case"Angular":badgeUrlArray.push("url4");break;case"Svelte":badgeUrlArray.push("url5");break;case"Laravel":badgeUrlArray.push("url6");break;case"Bootstrap":badgeUrlArray.push("url7");break;case"jQuery":badgeUrlArray.push("url8")}
    return userChosenBadges.map((badge, i) => `![${badge}](${badgeUrlArray[i]})`);
}
console.log(generateFrameworkBadges(userChosenBadges))

danh · Accepted Answer · 2023-01-28 02:18:36Z

1

In addition to the @Unmitigated answer, which you should feel free to accept, note that the switch can be stated much more concisely with an object literal, and with that, the whole function can be restated as a single map.

function generateFrameworkBadges(userChosenBadges) {
  const badge2Url = {
    'Next.js': 'url1',
    'React': 'url2',
    'Vue': 'url3',
    'Angular': 'url4',
    'Svelte': 'url5',
    'Laravel': 'url6',
    'Bootstrap': 'url7',
    'jQuery': 'url8'
  }
  return userChosenBadges.map(b => `![${b}](${badge2Url[b]})`);
}

const userChosenBadges = ['Next.js', 'React']
console.log(generateFrameworkBadges(userChosenBadges))

answered Jan 28, 2023 at 2:18

danh

62.7k10 gold badges100 silver badges139 bronze badges

2 Comments

Unmitigated Over a year ago

This method is indeed better. +1

majorian Over a year ago

Yes! It's evidently more concise.

Collectives™ on Stack Overflow

Using switch inside for loop not working as expected

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related