CODEWITHSUNDEEP
phpsymfonytwig
aknessy
aknessy

Reputation: 113

Twig Comparison Operator not behaving as it should

Am trying to add a certain class to an anchor element if a given condition is met using symfony's twig templating engine, The following piece of code is being used in an attempt to achieve this:

{% if colors is defined and colors is not empty %}
{% for keys, c in colors %}
<li>
   <a id="{{ keys }}" data-rel="tooltip" data-placement="top" title="{{ c.color|capitalize }}" class="picker-btn{{ (colorData[keys] is defined and colorData[keys]['code'] == c.hexcode) ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}

The above code adds the selected class rightfully, to just the first anchor element even when I expect to have 3 anchor elements assigned this class:

{% if colors is defined and colors is not empty %}
{% for keys, c in colors %}
<li>
   <a id="{{ keys }}" data-rel="tooltip" data-placement="top" title="{{ c.color|capitalize }}" class="picker-btn{{ (colorData[keys] is defined and colorData[keys]['code'] in colors | keys) ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}

The second code fragment adds the selected class to 3 anchor elements because however you wish to look at it, colorData[keys]['code']has keys that exist in the colors array even if the class isn't being added to the right anchor elements. My question is this; if the comparison operator (==) returns true for matched variable values why isn't the first code fragment working? and why is the second code fragment adding this class to the wrong anchor elements?

A snapshot of the colorData array is shown below: enter image description here

That of the colors array is thus:

enter image description here

Upvotes: 1

Views: 238

Answers (2)

Tomsgu
Tomsgu

Reputation: 1016

About the first example you're comparing:

  1. "#FFFFFF" == "#FFFFFF"
  2. "#222222" == "#795548"
  3. "#01579b" == "#3e2723"

and after this comparsion it finishes 3 times in condition colorData[keys] is defined. What you can do here is to add one more loop.

{% if colors is defined and colors is not empty %}
{% for keys, c in colors %}
<li>
   {% set isColorInColorData = false %}
   {% for exactColor in colorData %}
        {% if exactColor.code == c.hexcode %}
             {% set isColorInColorData = true %}
        {% endif %}                
   {% endfor %}

   <a id="{{ keys }}" data-rel="tooltip" data-placement="top" title="{{ c.color|capitalize }}" class="picker-btn{{ isColorInColorData ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}

Looking to the second example you're comparing a string with an integer.

  1. "#FFFFFF" in [0,1,2]
  2. "#222222" in [0,1,2]
  3. "#01579b" in [0,1,2]

Note that "#FFFFFF" is "equal"(==) to 0 in php!!

So you have to really concentrate on what are you comparing. In twig there is no === operator.

Upvotes: 3

duncan
duncan

Reputation: 31912

With the first code, you're saying

colorData[keys] is defined and colorData[keys]['code'] == c.hexcode

As you loop over an array of 3 items, keys is going to be 0, 1, 2 (or maybe 1, 2, 3 given it's Twig). So you're saying 

colorData[0]['code'] == c.hexcode

i.e. comparing colorData[0] with colors[0], so does #FFFFFF == #FFFFFF, which it does.

Second iteration, you're then comparing colorData[1] with colors[1], so does #795548 == #222222, and so on.

Upvotes: 1

Related Questions