CODEWITHSUNDEEP
javascript
zadubz
zadubz

Reputation: 1301

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

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>

Upvotes: 0

Views: 97

Answers (6)

Joshua Wade
Joshua Wade

Reputation: 5283

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()];

Upvotes: 3

VirxEC
VirxEC

Reputation: 1054

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];
    }
}

Upvotes: 2

Nirmala
Nirmala

Reputation: 65

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];

Upvotes: 1

Code Maniac
Code Maniac

Reputation: 37775

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>

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

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>

Upvotes: 3

Pytth
Pytth

Reputation: 4186

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()]

Upvotes: 5

Related Questions