JavaScript: How can I refactor if..else statements using less repetitive code?

Question

I have a server generated template that contains multiple elements with ids book_cat_id, book_cat_id2 etc that I need to find and change their inline background colours to match corresponding categories

data-cat_label="Fiction" can have any one of the categories Fiction, Fantasy, Comic, History, Technical

Is there is more efficient way of doing this for multiple colours?

    const colors =	{
     fiction: "#ff7477",  
     fantasy: "#7dbb65",  
     technical: "#BC9DCA", 
     comic: "#00A2E0", 
     history: "#ff0099", 
     health: "#f59e2e" 
    }

    let id1   = book_cat_id.getAttribute("data-cat_label");
    let id2   = book_cat_id2.getAttribute("data-cat_label");

    if(id1 === 'Fiction') {
          book_cat_id.style.backgroundColor = colors.fiction;
      }else if (id1 === 'Fantasy') {
           book_cat_id.style.backgroundColor = colors.fantasy;
      }else if (id1 === 'Comic') {
           book_cat_id.style.backgroundColor = colors.comic;
      }else if (id1 === 'History') {
           book_cat_id.style.backgroundColor = colors.history;
      }
      
    if(id2 === 'Fiction') {
          book_cat_id2.style.backgroundColor = colors.fiction;
      }else if (id2 === 'Fantasy') {
           book_cat_id2.style.backgroundColor = colors.fantasy;
      }else if (id2 === 'Comic') {
           book_cat_id2.style.backgroundColor = colors.comic;
      }else if (id2 === 'History') {
           book_cat_id2.style.backgroundColor = colors.history;
      }

    <table>
      <tr>
        <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;">
          Book
        </td>
      </tr>
      <tr>
        <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;">
          Book 
        </td>
      </tr>
    </table>

put the ids in an array and in your case you cna sue a switch stament — jonathan Heindl
– jonathan Heindl, Commented May 21, 2019 at 17:44
on a 1:1 switch, a look up table is the way to go: book_cat_id.style.backgroundColor = ({'History': colors.history, 'Fantasy': colors.fantasy})[id1] ; add keys as needed. — dandavis
– dandavis, Commented May 21, 2019 at 17:44
book_cat_id.style.backgroundColor = colors[id1.toLowerCase()], assuming all of the possible labels are present as keys in colors... — Heretic Monkey
– Heretic Monkey, Commented May 21, 2019 at 17:45
if you have access to the server id also think about adding classes to the elements then you can do document.getElementsByClassName("book_cat").forEach(el=>...) — jonathan Heindl
– jonathan Heindl, Commented May 21, 2019 at 17:47

Pytth · Accepted Answer · 2019-05-21 17:45:13Z

5

In this case, you could do something like this.

Instead of:

if(id2 === 'Fiction') {
    book_cat_id2.style.backgroundColor = colors.fiction;
}else if (id2 === 'Fantasy') {
     book_cat_id2.style.backgroundColor = colors.fantasy;
}else if (id2 === 'Comic') {
     book_cat_id2.style.backgroundColor = colors.comic;
}else if (id2 === 'History') {
     book_cat_id2.style.backgroundColor = colors.history;
}

You could do:

book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()]

answered May 21, 2019 at 17:45

Pytth

4,1961 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua Wade · Accepted Answer · 2020-03-24 14:15:29Z

3

You're almost there. Replace the current Javascript with the following:

const colors ={
    fiction: "#ff7477",  
    fantasy: "#7dbb65",  
    technical: "#BC9DCA", 
    comic: "#00A2E0", 
    history: "#ff0099", 
    health: "#f59e2e" 
}

let id1 = book_cat_id.getAttribute("data-cat_label");
let id2 = book_cat_id2.getAttribute("data-cat_label");

// Replaces if statements with a direct lookup by ID
book_cat_id.style.backgroundColor = colors[id1.toLowerCase()];
book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()];

edited Mar 24, 2020 at 14:15

answered May 21, 2019 at 17:46

Joshua Wade

5,3633 gold badges27 silver badges48 bronze badges

Comments

Anurag Srivastava · Accepted Answer · 2019-05-21 17:45:32Z

3

Since you already have the key names, just use toLowerCase()

const colors = {
  fiction: "#ff7477",
  fantasy: "#7dbb65",
  technical: "#BC9DCA",
  comic: "#00A2E0",
  history: "#ff0099",
  health: "#f59e2e"
}

let id1 = book_cat_id.getAttribute("data-cat_label").toLowerCase();
let id2 = book_cat_id2.getAttribute("data-cat_label").toLowerCase();
book_cat_id.style.backgroundColor = colors[id1];
book_cat_id2.style.backgroundColor = colors[id2];

<table>
  <tr>
    <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;">
      Book
    </td>
  </tr>
  <tr>
    <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;">
      Book
    </td>
  </tr>
</table>

answered May 21, 2019 at 17:45

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

Comments

VirxEC · Accepted Answer · 2019-05-21 17:53:29Z

You can create 2 arrays - typeName and typeColor. typeName[0] will refer to "Fiction" and typeColor[0] will refer to "#ff7477". You can then make a for loop and loop through them like this:

const typeColors = [
 "#ff7477",  
 "#7dbb65",  
 "#BC9DCA", 
 "#00A2E0", 
 "#ff0099", 
 "#f59e2e" 
];

const typeNames = [
 "Fiction",
 "Fantasy",
 "Technical",
 "Comic",
 "History",
 "Health"
];

let id1   = book_cat_id.getAttribute("data-cat_label");
let id2   = book_cat_id2.getAttribute("data-cat_label");

for (var i = 0; i<typeColors.length; i++) {
    if (id1 == typeNames[i]) {
        book_cat_id.style.backgroundColor = typeColors[i];
    }
    if (id2 == typeNames[i]) {
        book_cat_id2.style.backgroundColor = typeColors[i];
    }
}

Code Maniac · Accepted Answer · 2019-05-21 17:48:09Z

You can use computed property access of object using [] notation

const colors =	{
 fiction: "#ff7477",  
 fantasy: "#7dbb65",  
 technical: "#BC9DCA", 
 comic: "#00A2E0", 
 history: "#ff0099", 
 health: "#f59e2e" 
}

let id1   = book_cat_id.getAttribute("data-cat_label");
let id2   = book_cat_id2.getAttribute("data-cat_label");

book_cat_id.style.backgroundColor = colors[id1.toLowerCase()]
book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()]

<table>
  <tr>
    <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;">
      Book
    </td>
  </tr>
  <tr>
    <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;">
      Book 
    </td>
  </tr>
</table>

Nirmala · Accepted Answer · 2019-05-21 17:50:16Z

1

If data-cat_label is named same as property in colors object, you can access the object property using bracket(colors[id1]) of dot notation(colors.id1).

 let id1   = book_cat_id.getAttribute("data-cat_label").toLowerCase();
 let id2   = book_cat_id2.getAttribute("data-cat_label").toLowerCase();
 book_cat_id.style.backgroundColor = colors[id1];
 book_cat_id2.style.backgroundColor = colors[id2];

answered May 21, 2019 at 17:50

Nirmala

752 silver badges10 bronze badges

Collectives™ on Stack Overflow

JavaScript: How can I refactor if..else statements using less repetitive code?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related